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

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

css html

Css 如何在具有动态高度的固定div标题之后设置div内容的样式,css,html,position,fixed,Css,Html,Position,Fixed,以下情况： <body> <div style="position:fixed; width:100%">[place holder for header]</div> <div style="position:relative;width:100%;margin-top:100px">[content]</div> </body> [标题的位置保持器] [内容] 我需要的标题始终可见，并在顶部，所以这一个应该与位

以下情况：

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


[标题的位置保持器]
[内容]

我需要的标题始终可见，并在顶部，所以这一个应该与位置：固定。收割台高度自调整后出现问题。如果标题高于100px，则隐藏部分内容

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

我仍然在寻找一个只使用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唯一的解决方案（虽然不是超级干净）可以是显示同一块两次：第一块“位置：固定”，第二块“可见性：隐藏”。由于两者的高度相同，第二个块的作用是将页面内容向下推到适当的级别。

注意语法：“宽度”而不是“宽度”。您需要纯CSS解决方案，还是也可以使用JavaScript？恐怕没有纯CSS解决方案。我更喜欢CSS，但如果没有解决方案，我会很高兴看到javascript的答案。我只是花了一些时间研究这个问题，我很确定没有JS是不可能的。只要你删除第二块中的任何加载脚本、html ID和所有类似的动态内容，@Etienne的巧妙回答是这个问题唯一的css解决方案。这实际上也很好。我不认为有一个CSS唯一的解决方案它的工作完美！这可能是唯一的CSS解决方案。