Question

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

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

编辑：我能想到的一个解决方案是打印标题两次并将第二个设置为位置：relative和visibility：hidden。虽然它应该工作，但它似乎是一个可怕的解决方案。

Answer 1

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

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

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

用占位符固定的位置

3 个答案: