如何在具有动态高度的固定 div 标题后设置 div 内容的样式答案

【问题标题】：How to style a div content after fixed div header with dynamic height如何在具有动态高度的固定 div 标题后设置 div 内容的样式
【发布时间】：2012-07-02 10:08:47
【问题描述】：

以下情况：

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

我需要标题始终可见并位于顶部，所以这个应该是位置：固定的。标题 - 高度自行调整后出现问题。如果标题高于 100 像素，则隐藏部分内容。

我如何 (CSS) 动态设置内容 div 关于标题结尾的起始位置。

【问题讨论】：

注意语法：'width' 而不是'widht'
您需要纯 CSS 解决方案，还是也可以使用 JavaScript？恐怕没有纯 CSS 解决方案。
我更喜欢 css 但如果没有解决方案我会很高兴 javascript 答案。
我只是花了一些时间研究这个，我很确定没有 JS 是不可能的。
只要您在第二个区块中删除任何 onload 脚本、html id 和所有类似的动态内容，@Etienne 的巧妙回答是解决此问题的纯 css 解决方案。

标签： css html position fixed

【解决方案1】：

我仍在寻找仅使用 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) 的优势在于，它可以处理您可能已应用于标题的边框和边距。

【讨论】：

这实际上也很好用。我认为没有纯 CSS 的解决方案

【解决方案2】：

CSS 唯一的解决方案（虽然不是超级干净）可能是两次显示相同的块：第一个块“位置：固定”，第二个块“可见性：隐藏”。由于两者的高度相同，因此第二个块的作用是将页面内容下推到适当的水平。

【讨论】：

完美运行！这可能是唯一的纯 CSS 解决方案。