标题 div 保持在顶部，垂直滚动 div 下方，滚动条仅附加到该 div

2022-01-11 00:00:00 header layout scroll css

我有 2 个主要的 div，标题和一个包含在 div 中的滚动列表.我希望标题始终保留在页面顶部，以及下面的滚动列表.滚动条应该附加到滚动的div而不是整个页面，即滚动条不会出现在标题的右侧，只是滚动的div.

I have 2 main divs, the header and a scrolling list contained in a div. I want the header to always remain at the top of the page, and the scrolling list below. The scrollbar should be attached to the scrolling div and not to the whole page, i.e. the scrollbar does not appear on the right of the header, just the scrolling div.

这就是我想要实现的目标:

This is what i'm trying to achieve:

______________________
|_______header_______|
|                  |*|
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

* = scrollbar

布局应该是流畅的，如果窗口垂直拉伸，只有容器 div 和它的滚动条应该变长.

The layout should be fluid and if the window is stretched vertically, only the container div and it's scrollbar should get longer.

我不想将标题 position: fixed; 放置在这样的位置，因为滚动条将位于它的右侧而不是它的下方.

I don't want to position the header position: fixed; as then the scrollbar will be on the right of it instead of underneath it.

推荐答案

HTML:

​<div class="header">This is the header</div>
<div class="content">This is the content</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​.header
{
    height:50px;
}
.content
{
    position:absolute;
    top: 50px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:scroll;        
}​

相关文章