创建可变高度“固定” CSS 中的标题与可滚动内容

Question

我想在页面上创建一个标题，当您滚动页面时该标题不会移动。

这看起来很简单，只需将“position:fixed”添加到样式中，但内容就会出现在标题下方，因为标题“从流中删除”。所以我认为的解决方案是在内容中添加“margin-top: height”。

当标题的高度可变时，解决此问题的最佳方法是什么？

我有一个小提琴来演示这个问题：

http://jsfiddle.net/waterlooalex/j4Z8F/2 /

如果您的浏览器窗口不是太大，内容文本将滚动到“hello world header”下方，问题是第一行文本“Lorem ipsum...”被隐藏。我已经得到了一些解决这个问题的注释。

Answer 1

您可以添加未固定的标题 div 的第二个副本，并在其上使用类似 visibility:hidden 的内容。这样，它就可以将内容推送到您需要的确切位置，但无需使用 JavaScript。有点黑客，但我在你的小提琴中尝试过，它有效。

Answer 2

您可以使用 flexbox 布局模型来解决此问题，如下所示下面的演示。

请注意，出于演示目的，我已将 display:flex 添加到 中，理想情况下您应该将其赋予更具体的父元素。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
#header {
  background: dodgerblue;
}
h1 {
  font-size: 2em;
  font-weight: 700;
}
#content {
  flex: auto;
  overflow-y: auto;
}

<div id="header">
  <h1>hello world</h1>
</div>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ante quam, vitae fringilla odio. Nulla molestie, justo non adipiscing varius, mi turpis luctus ligula, sit amet posuere massa elit a tellus. Cras metus risus, sagittis hendrerit sollicitudin
    in, lobortis at elit. Nam posuere molestie enim, sagittis mattis justo vehicula gravida. Fusce placerat porta fermentum. Sed laoreet leo ac tellus consectetur blandit. Sed consequat, ipsum a imperdiet convallis, elit est ultrices elit, et malesuada
    lorem magna eu eros. Sed convallis adipiscing nibh ut volutpat. In consequat egestas elit, eget venenatis lacus condimentum sed. Maecenas semper sapien in lacus feugiat volutpat vestibulum dolor pulvinar. Duis ultricies interdum ante elementum tempor.</p>

  <p>Aliquam nulla tellus, consequat nec suscipit vitae, laoreet non erat. Donec tempor ligula in nisi porttitor nec interdum magna gravida. Aenean eleifend, ipsum eu tincidunt tristique, orci mi molestie libero, at aliquam massa velit ut tortor. Aenean
    nisi velit, feugiat ut posuere eget, porta ac erat. Morbi lobortis ligula nec sem bibendum in imperdiet ipsum tempus. Integer tincidunt mauris quis justo consequat eget pharetra arcu rutrum. Nullam auctor libero luctus eros porta commodo. Aenean auctor
    libero eu arcu porta cursus. Fusce viverra arcu nec elit rutrum et fringilla lectus vulputate. Integer sed leo sit amet ligula aliquam suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla commodo
    varius lectus, non pellentesque dui ornare vel. Duis pretium purus at sapien sollicitudin posuere. Curabitur volutpat posuere diam, at tincidunt leo lacinia quis. Quisque eu arcu enim. Vestibulum condimentum condimentum erat. Sed eros erat, volutpat
    et molestie nec, pharetra vitae diam. Proin tempus, massa vitae malesuada dignissim, ipsum ipsum sagittis neque, ac vehicula neque odio nec urna.</p>

  <p>Praesent sed arcu in nunc egestas sagittis sollicitudin at nunc. Curabitur mattis viverra odio. Donec volutpat mauris nec libero molestie quis venenatis mauris convallis. Mauris porta varius nibh, id tincidunt nunc ullamcorper in. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce auctor ultrices vulputate. Nam in lacus metus. Duis tempus fringilla lacus ut tristique. Nunc sed hendrerit nunc. Nunc non tellus a magna accumsan volutpat. Aenean sollicitudin
    orci in sapien interdum rhoncus cursus ligula iaculis. Nunc mauris sapien, euismod non egestas vitae, dapibus at libero.</p>

  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor nisi, pellentesque et vestibulum eu, scelerisque eget est. Vivamus porta erat vitae eros sodales accumsan. Duis ligula dui, scelerisque sollicitudin
    blandit quis, sollicitudin vel ipsum. Sed semper dictum eleifend. Duis diam leo, ultricies at consequat nec, consectetur vel lacus. Proin semper luctus nisl, ut luctus sapien egestas vitae. Maecenas eu est nisi. Aliquam erat volutpat. Sed vulputate
    ligula rutrum nunc fermentum vitae consequat magna congue. Donec accumsan consequat pellentesque. Cras justo enim, venenatis non venenatis eu, faucibus id ligula. Aliquam et lorem purus. Sed fringilla gravida dui vitae viverra. Sed id erat nisl. Nulla
    nibh nisi, luctus sed scelerisque id, congue in risus.</p>

  <p>Phasellus eu purus nibh, sit amet sodales dui. Integer tincidunt magna id sem varius faucibus. Etiam id condimentum velit. Cras cursus diam eget libero tristique malesuada. Pellentesque quis arcu tincidunt dolor adipiscing congue ut a enim. Nulla nec
    lacinia est. Pellentesque nec dui mauris, eu eleifend felis. Aliquam feugiat ultrices mi id hendrerit. Phasellus varius sagittis urna, ut fringilla nisi sollicitudin non. Pellentesque ac ligula dolor, ut volutpat sapien. Curabitur vitae diam quis
    ante laoreet suscipit non vitae tellus. Nam id magna est, eu tincidunt odio.
  </p>
</div>

Answer 3

此 JavaScript 将采用固定标题的可变高度，并将内容的上边距设置为在下方流动。只需调用onload即可

<script type="text/javascript">
    function AdjustHeight() {
        var height = document.getElementById("fixedheader").offsetHeight;
        document.getElementById("content").style.marginTop = height + 'px';
    }    
</script>

Answer 4

为了解决这个问题，我最终在我的内容中添加了一个“虚拟”div。
该 div 与标题 div 具有相同的高度，因此将内容向下推得足以创建正确的偏移量。
这与@curtisdf 上面的答案相同，但是他建议复制您的标题，我建议制作一个具有相同高度的空 div。

由于高度可以改变的原因有很多（窗口大小调整、内容更改等），我最终使用 https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js 保持虚拟 div 的高度与这真实标头：

        var me = this;
        var summary = me.summary;
        var dummy = me.summaryDummy;
        var resize = function () {
            dummy.style.height = summary.clientHeight + 'px';
        };
        new ResizeSensor(summary, resize);
        resize();

请注意，我可以引用真实标头 (me.summary) 和虚拟标头 (me.summaryDummy)，因为 aurelia.io 的 ref 实现，但您可以使用 JQuery 或通过 ID 获取对 div 的引用。

Answer 5

无论标题有多高，我总是在内容顶部设置边距，因为我的标题通常不需要更改高度。

如果你的标题确实改变了高度，那么我担心你将不得不使用 JavaScript 来解决它。脱离流程意味着页面的其余部分将正常进行，并且 JavaScript 必须介入以提供帮助。