css - 位置用占位符固定

Question

我有一个动态高度的 div。这个 div 需要定位：固定。下面的 div 应该从第一个 div 结束的地方垂直开始。

原因是 div 是一个应该保持在顶部的标题。但是，内容应该在标题之后开始。这样当页面滚动时，标题保持固定，其余部分照常滚动。为内容设置顶部边距通常可以解决问题，但这种类型的标题具有动态高度。有任何想法吗？

编辑：我能想到的一种解决方案是两次打印标题并将第二个设置为位置：相对和可见性：隐藏。虽然它应该可以工作，但它似乎是一个糟糕的解决方案。

Answer 1

固定和绝对定位的元素在正常页面流之外。您不能单独使用 CSS 设置相对于它们或在它们之外的其他内容。

这是一个小提琴，以防万一，呃，小提琴。

http://jsfiddle.net/fX7cH/1/

<div id="page">
  <div id="header"></div>
  <div id="content"></div>
</div>

Answer 2

这种特定情况的解决方案是为相应样式表（桌面、移动）的内容 div 定义不同的 margin-top 值。然而，这不是一个通用的解决方案。问题是移动布局中的菜单在块显示中具有每个列表项。因此，根据项目的数量，内容 div 的 margin-top 需要手动调整。不完全优雅，但对我有用。

Answer 3

我已经为此苦苦挣扎了一段时间，虽然并不完美，但这是一个不同的解决方案，它使用再次进入标题的任何动态内容作为占位符来获得完全相同的高度，然后使用 CSS 在视觉上隐藏内容和aria-hidden="true"HTML对屏幕阅读器隐藏的属性。这里没有搞乱边距。

https://jsfiddle.net/lukehatfield/zmcj3htx/

<div class="page">
  <div class="header">HEADER</div>
  <div class="header-placeholder" aria-hidden="true">HEADER</div>
  <div class="content">CONTENT</div>
</div>