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>

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

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

4

2 回答 2

8

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

于 2012-07-02T22:27:25.907 回答
6

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

于 2014-01-17T21:55:13.170 回答