以下情况:
<body>
<div style="position:fixed; width:100%">[place holder for header]</div>
<div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>
我需要 header 始终可见并位于顶部,所以这个 header 应该使用 position:fixed。 header-height 自行调整后出现问题。如果标题高于 100 像素,则部分内容将被隐藏。
我如何 (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 - 如何在具有动态高度的固定 div 标题后设置 div 内容的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11286141/