Html 如何将标题移出滚动区域？_Html_Css_Overflow

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

html css

Html 如何将标题移出滚动区域？,html,css,overflow,Html,Css,Overflow,我有一个标题和一个长的可滚动内容。我希望标题不可滚动。我尝试将overflow:hidden设置为标题，但没有成功如何将标题从滚动区域中取出片段： <body> <div style="overflow: hidden">Header</div> <div style="overflow: scroll">Content - very long Content... 标题内容-非常长的内容。。。看我还试着在身体上设置风格，但

我有一个标题和一个长的可滚动内容。我希望标题不可滚动。我尝试将

overflow:hidden

设置为标题，但没有成功

如何将标题从滚动区域中取出

片段：

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


标题
内容-非常长的内容。。。

看

我还试着在身体上设置风格，但没有成功

我知道有，但我不想使用它，因为它需要提前知道页眉的高度（对于页边）。这需要大小复制，如果标题更复杂，则需要计算。

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

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

}

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

找到了flex魔法

这是一个如何制作固定标题和可滚动内容的示例。代码：

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


圣杯
标题
------------
内容-开始

对于（var i=0；iI）编辑的链接，stackoverflow目前对我来说非常滞后上面的代码很好！很好的anwser-很好的问题。大家竖起大拇指。看起来内容的底部被推到了窗口下面。如果你把标题调高，你可以看得更清楚。你知道如何解决这个问题吗？是的，我有个主意，你用每个人固定标题的方式来做。你把它放在一个位置：固定。你要求什么如果不使用定位，则不可能。或者为内容指定固定高度。这也可能适用于与隐藏的底部内容相关的问题：相关：