Question

我有一个标题和一个可滚动的长内容。我希望标题不可滚动。我尝试将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，但我不想使用它，因为它需要提前知道标题的高度（对于边距）。这需要大小重复，如果标题更复杂，则需要进行计算。

Answer 1

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

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

}

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

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

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>

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

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

2 个答案: