在固定标题后添加元素

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

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上和其他地方解决类似这样的问题，但无济于事（部分原因是由于我很难说出具体的词汇问题）。我尝试了一个清除，

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

但是，这仍然行不通。我也尝试在p元素上添加一个margin-top: 100px，但我认为在我改变未来头部高度的情况下这种做法不好，而且还必须对头部或任何其他元素之后的每个单个元素执行此操作可能会添加一个position: fixed或position: absolute。另外，根据不同大小的屏幕，标题将是流体高度。

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

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

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

来源

2014-08-28 Jace Cotton

http://jsfiddle.net/09qL0nzv/ – 2014-08-28 16:26:04

我不知道有任何其他选择，但JS/JQ将是最小的。 – 2014-08-28 16:28:50

@Paulie_D我相信它会很小。我猜，只要我们确信没有纯粹的CSS解决方案，那就是可以接受的。似乎应该是对的？简单的基本问题。呃，好吧。我也会接受Javascript的答案。（编辑） – 2014-08-28 16:30:01

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

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

来源

2014-08-28 17:56:01

当您修复标题时，您放置的任何其他元素无视其存在。

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

来源

2014-08-28 17:26:49 alokrajiv

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

有这个不理想的解决方案，但可能是不是改变<p>缘好一点的选择是一个空<div>添加到您的内容的开始，该<header>的高度匹配。

下面是一个例子JSFiddle：

来源

2014-08-28 17:32:36 GentlePurpleRain

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

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

有可能是这样做的更好的办法，但我的推理设置p标签的初始保证金是外整个标题的高度，然后每当标题可能改变（在这种情况下，这将是当窗口被调整大小时），然后在p标记上重新评估该空白。

来源

2016-02-05 19:16:30

在固定标题后添加元素

回答

相关问题