Question

我在屏幕顶部有一个固定的标题，如果我尝试在标题后添加一个元素，那么该元素最终会忽略标题的高度。

HTML

<header></header>
<p>Empty text</p>

CSS

header {
    display: block;
    height: 100px;
    width: 100%;
    background: #eee;
    position: fixed;
    top: 0;
    z-index: 100;
}

JSFIDDLE

我已经在StackOverflow和其他地方搜索过与此类似的问题的解决方案，但没有用（部分原因是我很难用语言表达具体问题）。我尝试了一个clearfix，

<header></header>
<div style="clear:both"></div>
<p>Empty text</p>

但这仍然无法奏效。我还尝试在margin-top: 100px元素中添加p，但我认为在将来更改标题高度的情况下这是不好的做法，并且还必须为每个元素执行此操作在标题或任何其他元素后面，我可能会添加position: fixed或position: absolute。此外，根据不同尺寸的屏幕，标题将是一个流体高度。

现在我正在使用线框图，所以我真的不使用JavaScript，只使用简单的CSS，如果可能的话。如果不是，那么最小的vanilla javascript就行了。这是一个基本的网页设计问题，我总是用margin-top来反驳它，但我想知道是否有人知道更清洁，更好的方法来应对它。

此外，这需要至少在某种程度上跨浏览器。再次，只有线框图。我的线框应该可以处理任何支持基本CSS的东西。

很抱歉，如果这是一个重复的问题，我确定它是，但我找不到任何与我的情况相符的内容。非常感谢任何帮助！

Answer 1

http://jsfiddle.net/09qL0nzv/3/

var p = document.getElementsByTagName("p")[0],
    header = document.getElementsByTagName("header")[0],
    h = window.getComputedStyle(header).getPropertyValue("height");

p.style.marginTop=h;

这将设置段落的上边距等于固定标题的高度。但是，这不会考虑填充或边框。有两种可能的解决方案。

在标题上使用box-sizing: border-box。这将确保高度（包括填充和边框）将是样式表中定义的高度。（我强烈建议在所有元素上使用border-box，如：*, *:before, *:after {-moz-box-sizing:border-box;box-sizing: border-box;}。）

另一种解决方案是在JavaScript中将填充和边框添加到计算值中，并将该值包含在您设置为p的边距顶部。我不喜欢这个解决方案，但它确实有用。

Answer 2

当您修复标题时，您放置的任何其他元素都会忽略它的存在。

我看到的唯一解决方法是给出填充（或边距）。但是，根据我的理解，你需要一个更有活力的溶液。在这种情况下，最好的解决方案是使用客户端脚本，例如jquery / js来确定元素当前高度，然后为下面的元素添加相同的填充。

Answer 3

导致问题的是position:fixed。标题不再是流内容的一部分，因此流内容从页面顶部开始。

对此没有理想的解决方案，但是一个可能比更改<p>页边距要好一点的选项是在内容的开头添加一个空的<div>以匹配高度<header>。

以下是JSFiddle示例：

Answer 4

对于更动态的解决方案，这就是我提出的

$('p').css('margin-top', $('header').outerHeight());
$(window).resize(function() {
  $('p').css('margin-top', $('header').outerHeight());
});

可能有更好的方法可以做到这一点，但我的理由是将p标签的初始边距设置为整个标头的外部高度，然后每当标头可能发生变化时（在这种情况下，这将是当窗口调整大小时，然后在p标签上重新评估边距。

固定标题后添加元素

4 个答案: