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

Question

following situation: 以下情况：

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

I need the header always visible and at the top, so this one should be with position:fixed. 我需要标题始终可见并位于顶部，因此这个应该是位置：固定。 A problem occurs after self adjustments of the header - height. 自我调整标题 - 高度后出现问题。 If the header is higher than 100px a part of the content is hidden. 如果标题高于100px，则隐藏部分内容。

How can I (CSS) dynamically set the start position of the content div regarding the end of the header. 我如何（CSS）动态设置关于标题末尾的内容div的开始位置。

Answer 1

I'm still looking for a CSS only solution, but for the moment here's an idea using just one line of JavaScript – when using jQuery: 我仍然在寻找一个仅限CSS的解决方案，但目前只使用一行JavaScript的想法 - 当使用jQuery时：

JavaScript JavaScript的

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

HTML HTML

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

The advantage of using .outerHeight(true) is, that it takes care of borders and margins you may have applied to your header. 使用.outerHeight(true)的优点是，它可以处理您可能已应用于标题的边框和边距。

Answer 2

CSS only solution (although not super clean) could be to display the same block twice: 1st block "position: fixed", 2nd block "visibility: hidden". 仅CSS解决方案（虽然不是超级干净）可能是两次显示相同的块：第一个块“position：fixed”，第二个块“visibility：hidden”。 Since both would have the same height, the role for the 2nd block would be to push down the page content to the appropriate level. 由于两者具有相同的高度，因此第二个块的作用是将页面内容下推到适当的级别。

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

问题描述

2 个解决方案

解决方案1
8 已采纳 2012-07-02 22:27:25

解决方案2
6 2014-01-17 21:55:13

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

问题描述

2 个解决方案

解决方案1 8 已采纳 2012-07-02 22:27:25

解决方案2 6 2014-01-17 21:55:13

解决方案1
8 已采纳 2012-07-02 22:27:25

解决方案2
6 2014-01-17 21:55:13