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

Question

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

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

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

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

* = scrollbar

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

bha*_*lin 52

HTML:

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

Run Code Online (Sandbox Code Playgroud)

CSS:

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

Run Code Online (Sandbox Code Playgroud)

如果`.content`有可能无法到达页面底部,请使用`overflow-y:auto;`.在这种情况下它会删除滚动条. (6认同)

Answer 2

Ali*_*aka 11

找到了灵魂魔法.

以下是如何执行固定标头和可滚动内容的示例.码:

<!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>

Run Code Online (Sandbox Code Playgroud)

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

有关完整的圣杯实现(页眉,页脚,导航,侧面和内容),使用弹性显示,请转到此处.

这是天才的解决方案!这比100vh更好 (2认同)

归档时间：	13 年，7 月前
查看次数：	101517 次
最近记录：	9 年，4 月前