英文:
Bottom drawer with fixed header and scrollable content
问题
我有一个带有固定标题和圆角边框的简单底部抽屉。
内容可滚动，因此会出现在固定标题的后面。
问题是我们可以看到内容以及标题上方左侧和右侧的内容背景。
如何使内容可滚动，但顶部限制应该是标题的底部，而不是顶部？谢谢。
还请查看这里，因为滚动条在这里不会出现：https://codepen.io/JeffProd-the-encoder/pen/yLQyJLp
#bottomdrawer {
width: 200px;
max-height: 200px;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
#header {
position: fixed;
width: 200px;
background-color: rgb(107 114 128);
border-top-left-radius: 1.0rem;
border-top-right-radius: 1.0rem;
}
#content {
background-color: rgb(200 200 200);
}
<div id="bottomdrawer">
<div id="header">
TITLE
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
</div>
</div>
英文:
I have a simple bottom drawer with a header fixed and rounder borders.
The content is scrollable so it goes up behing the fixed header.
The problem is that we can see the content and also the background of the content behind the header at top left and right.
How to make the content scrollable but the top limit should be the bottom of the header, not the top ? thank you.
See here also because the scroll doesn't appear here : https://codepen.io/JeffProd-the-encoder/pen/yLQyJLp
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#bottomdrawer {
width: 200px;
max-height: 200px;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
#header {
position: fixed;
width: 200px;
background-color: rgb(107 114 128);
border-top-left-radius: 1.0rem;
border-top-right-radius: 1.0rem;
}
#content {
background-color: rgb(200 200 200);
}
<!-- language: lang-html -->
<div id="bottomdrawer">
<div id="header">
TITLE
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
可能不需要将 #header 固定，因为 #bottomdrawer 已经是固定的。最好设置 #content { overflow-y: auto; }：
#bottomdrawer {
width: 200px;
height: min(200px, 100%);
position: fixed;
inset: auto 0 0;
display: flex;
flex-direction: column;
}
#header {
background-color: rgb(107 114 128);
border-radius: 1rem 1rem 0 0;
padding: .5rem 1rem;
}
#content {
background-color: rgb(200 200 200);
overflow-y: auto;
flex: auto;
}
<div id="bottomdrawer">
<div id="header">
TITLE
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
</div>
</div>
英文:
Probably, it is not necessary to make the #header fixed, because the #bottomdrawer is already fixed. It is better set #content { overflow-y: auto; }:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#bottomdrawer {
width: 200px;
height: min(200px, 100%);
position: fixed;
inset: auto 0 0;
display: flex;
flex-direction: column;
}
#header {
background-color: rgb(107 114 128);
border-radius: 1rem 1rem 0 0;
padding: .5rem 1rem;
}
#content {
background-color: rgb(200 200 200);
overflow-y: auto;
flex: auto;
}
<!-- language: lang-html -->
<div id="bottomdrawer">
<div id="header">
TITLE
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
你可以使用border-top-left和border-top-right的半径2px（不是rem），以及padding 5px。
#header {
position: fixed;
width: 200px;
background-color: rgb(107 114 128);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding: 5px;
}
希望这对你有所帮助。如果有其他问题，请随时提出。
英文:
You can use border-top-left and right radius 2px not rem, and padding 5px
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#bottomdrawer {
width: 200px;
max-height: 200px;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
#header {
position: fixed;
width: 200px;
background-color: rgb(107 114 128);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding: 5px
}
#content {
background-color: rgb(200 200 200);
}
<!-- language: lang-html -->
<div id="bottomdrawer">
<div id="header">
TITLE
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus
maximus molestie aliquet. Ut feugiat in ex ac posuere.
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论