css – 标题div保持在顶部,垂直滚动div,下面的滚动条只附加到该div

前端之家收集整理的这篇文章主要介绍了css – 标题div保持在顶部,垂直滚动div,下面的滚动条只附加到该div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有2个主div,标题和一个滚动列表包含在div。
我想标题始终保持在页面的顶部,并在下面的滚动列表。
滚动条应该附加到滚动div而不是整个页面,即滚动条不出现在标题的右侧,只是滚动div。

这是我想实现:

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

* = scrollbar

布局应该是流畅的,如果窗口被垂直拉伸,只有容器div和它的滚动条应该更长。

我不想定位头位置:fixed;因为滚动条将在它的右边,而不是在它的下面。

解决方法

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

猜你在找的CSS相关文章