Question

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

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

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

* = scrollbar

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

我不想定位标题position: fixed;，因为滚动条将位于其右侧而不是位于其下方。

Answer 1

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

Answer 2

找到灵魂魔法。

Here是如何执行固定标头和可滚动内容的示例。代码：

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
    </div>
  </body>
</html>

* flex解决方案的优点是内容独立于布局的其他部分。例如，内容不需要知道标题的高度。

对于完整的Holy Grail实施（页眉，页脚，导航，侧面和内容），使用弹性显示，转到here。

Answer 3

这是demo。使用position:fixed; top:0; left:0;，以便标题始终保持最佳状态。

#header {
    background:red;
    height:50px;
    width:100%;
    position:fixed;
    top:0;
    left:0;    
}.scroller {
    height:300px; 
    overflow:scroll;    
}

Answer 4

你需要使用js为身体div获得更好的身高

<html><body>
<div id="head" style="height:50px; width=100%; font-size:50px;">This is head</div>
<div id="body" style="height:700px; font-size:100px; white-space:pre-wrap;    overflow:scroll;">
This is body
T
h
i
s

i
s

b 
o
d
y
</div>
</body></html>

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

4 个答案: