2

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

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>

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

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

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

抱歉，如果这是一个重复的问题，我敢肯定，但我找不到任何与我的情况完全匹配的东西。任何帮助深表感谢！

4

4 回答 4

4

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. 我不喜欢这个解决方案，但它有效。

于 2014-08-28T17:56:01.610 回答
1

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

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

于 2014-08-28T17:26:49.067 回答
1

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

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

这是一个示例JSFiddle：

于 2014-08-28T17:32:36.933 回答
0

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

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

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

于 2016-02-05T19:16:30.350 回答