位置用占位符固定答案

【问题标题】：position fixed with placeholder位置用占位符固定
【发布时间】：2013-01-16 21:15:41
【问题描述】：

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

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

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

【问题讨论】：

为什么高度是动态的？
高度是动态的，因为布局是响应式的。此外，没有代码可言。只有一个标题 div 和一个内容。

标签： css height css-position

【解决方案1】：

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

这是一个小提琴，以防万一有人想要，呃，小提琴。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：