在固定标题后添加元素答案

【问题标题】：Adding elements after fixed header在固定标题后添加元素
【发布时间】：2014-10-22 14:20:30
【问题描述】：

我在屏幕顶部有一个固定的标题，如果我尝试在标题之后放置一个元素，则该元素最终会忽略标题的高度。

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。另外，header 会根据不同的屏幕大小而流动高度。

现在我正在制作线框图，所以如果可能的话，我真的宁愿不使用 JavaScript，而只使用纯 CSS。如果不是，最小的香草 javascript 就可以了。这是一个基本的网页设计问题，我一直用margin-top 来反驳它，但我想知道是否有人知道更清洁、更好的方式来对抗它。

此外，这至少需要跨浏览器。同样，只有线框图。我的线框应该能够处理任何支持基本 CSS 的东西。

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

【问题讨论】：

jsfiddle.net/09qL0nzv
我不知道任何替代方案，但 JS/JQ 将是最小的。
@Paulie_D 我相信这将是最小的。我猜这是可以接受的，只要我们确定没有纯 CSS 解决方案。好像应该有吧？简单的，根本的问题。呃，好吧。我想我也会接受 Javascript 的答案。（已编辑）
避免必须为标题后面的任何元素单独设置边距的解决方案是使用header+* {margin-top:100px;} 自动设置标题后面元素的边距。但是，如果标题的高度发生变化，这仍然无济于事。

标签： html css layout wireframe fixed-header-tables

【解决方案1】：

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

我见过的唯一解决方法是提供填充（或边距）。但是，据我了解，您需要一个更有活力的解决方案。在这种情况下，您最好的解决方案是使用客户端脚本比如 jquery/js 来确定元素的当前高度，然后为下面的元素添加与填充相同的值。

【讨论】：

【解决方案2】：

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

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

这是一个例子JSFiddle：

【讨论】：

【解决方案3】：

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;

这将为段落设置一个margin-top，等于固定标题的高度。但是，这不考虑填充或边框。对此有两种可能的解决方案。

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：