标题div保持在顶部，垂直滚动div在下面，滚动条只附加到那个div [英] Header div stays at top, vertical scrolling div below with scrollbar only attached to that div

问题描述

我有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.

这是我想实现的：

______________________
|_______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;        
}​

这篇关于标题div保持在顶部，垂直滚动div在下面，滚动条只附加到那个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！