如何在动态高度的固定div头部之后样式化div内容

Question

如何在动态高度的固定div头部之后样式化div内容

6

以下是需要翻译的内容：

以下情况：

<body>
 <div style="position:fixed; width:100%">[place holder for header]</div>
 <div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>

我需要标题始终可见且位于顶部，因此它应该具有position:fixed。在调整标题高度后会出现问题。如果标题高度超过100px，则部分内容将被隐藏。

我该如何（使用CSS）根据标题的底部动态设置内容div的起始位置？

- user1162738

注意语法：应为'width'而非'widht'。 - epsilones

3

需要纯CSS解决方案还是可以使用JavaScript？恐怕这个问题没有纯CSS的解决方案。请问您是否需要JavaScript的帮助呢？ - bfavaretto

我更喜欢使用CSS，但如果没有解决方案，我也会很高兴接受JavaScript的答案。 - user1162738

1

我刚花了一些时间研究这个问题，我相当确定没有 JavaScript 是不可能实现的。 - Alex Lande

只要您删除第二个块中的任何onload脚本、HTML id和所有类似的动态内容，@Etienne的巧妙答案就是这个问题的纯CSS解决方案。 - Geoffroy CALA

2个回答

6

纯CSS解决方案（虽然不是非常清晰）可以将同一块显示两次：第一块“position: fixed”，第二块“visibility: hidden”。由于两者高度相同，第二块的作用是将页面内容推向适当的位置。

- Etienne

它完美地运行！这可能是唯一的纯CSS解决方案。 - Geoffroy CALA

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- insertusernamehere · Accepted Answer

我仍在寻找一种只使用CSS的解决方案，但目前有一个想法只需要一行JavaScript代码 - 当使用jQuery时：

JavaScript

$(document).ready(function () {
    $('#content').css('marginTop', $('#header').outerHeight(true) );
});

HTML

<body>
    <div id="header" style="[…]">[place holder for header]</div>
    <div id="content" style="[…]">[content]</div>
</body>

使用.outerHeight(true)的优点在于，它考虑了您可能应用于标题的边框和边距。