如何将标题移出滚动区域？答案

【问题标题】：How to get the header out of the scroll area?如何将标题移出滚动区域？
【发布时间】：2015-10-12 07:11:53
【问题描述】：

我有一个标题和一个长的可滚动内容。我希望标题不可滚动。我尝试将overflow: hidden 设置为标题但没有成功。

如何让页眉脱离滚动区域？

片段：

<body>
  <div style="overflow: hidden">Header</div>
  <div style="overflow: scroll">Content - very long Content...

见a Plunker with this code。

我也尝试在正文中设置样式 - 没有成功。

我知道有a way to make the header fixed using position fixed，但我不想使用它，因为它需要提前知道标题的高度（用于边距）。这需要重复大小，如果标头更复杂，则需要计算。

【问题讨论】：

相关：stackoverflow.com/q/3593594/435605

标签： html css overflow

【解决方案1】：

发现了弹性魔法。

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。

【讨论】：

【解决方案2】：

首先删除您的内联样式。然后添加这个 css。

html , body {
  margin: 0px;
  height: 100%;

}

.content {
  height: 100%;
  overflow: scroll;
}

https://jsfiddle.net/sthsuuec/11/

【讨论】：

我编辑了链接，stackoverflow 目前对我来说真的很滞后。
在 jsfiddle（新链接）中，上面的代码运行良好！很好的回答者-很好的问题。竖起大拇指。
好像内容的底部被推到了窗口下方。如果您将标题设置得更高，您可以更清楚地看到它。知道如何解决这个问题吗？
是的，我有一个想法，你可以按照每个人都使用固定标题的方式进行操作。你把它作为一个位置：固定。如果不使用定位，您的要求是不可能的。或者为您的内容提供固定高度。那也可以jsfiddle.net/sthsuuec/12
一个关于隐藏底部内容的问题：stackoverflow.com/q/13193197/435605