在固定标题后添加元素 [英] Adding elements after fixed header

问题描述

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

HTML
$ b

 < header>< / header> 
< p>空文本< / p> 
  

CSS

  header {
 display：block; 
 height：100px; 
宽度：100％; 
背景：#eee; 
位置：固定; 
 top：0; 
 z-index：100; 
} 
  

JSFIDDLE

我在StackOverflow和其他地方搜索了解决类似问题的解决方案，但无济于事（部分原因是因为我很难说出具体的问题）。我尝试了一个clearfix，

 < header>< / header> 
< div style =clear：both>< / div> 
< p>空文本< / p> 
  

但这仍然无效。我也尝试在 p 元素中添加一个 margin-top：100px ，但我认为这种做法不好我将来会改变头部的高度，而且还必须为头部或任何其他元素后面的每个元素执行此操作，我可能会添加位置：fixed 或位置：绝对。此外，根据不同大小的屏幕，标题将为流体高度。

现在我是线框框架，所以我真的宁愿不使用JavaScript，只是简单的CSS，如果这是可能的。如果它不是，最小的香草JavaScript会做。这是一个基本的网页设计问题，我总是用 margin-top 来反驳它，但我想知道是否有人知道更清晰，更好的方法来解决它。 / p>

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

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

解决方案

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

I have a fixed header at the top of the screen, and if I try to put an element after the header, said element ends up ignoring the height of the header.

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

I've searched on StackOverflow and other places for solutions to problems similar to this but with no avail (in part due to me having a hard time verbalizing the specific problem). I tried a clearfix,

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

But that still doesn't work. I also tried adding a margin-top: 100px to the p element, but I consider that bad practice in the case of me changing the height of the header in the future, and also having to do this for every single element following the header or any other element I might add a position: fixed or position: absolute. Additionally, the header will be a fluid height according to different sized screens.

Right now I'm wireframing so I'd really rather not use JavaScript, just plain CSS, if that's possible. If it's not, minimal vanilla javascript will do. This is a fundamental web design problem and I've always countered it with margin-top but I'm wondering if anyone knows of a cleaner, better way to counter it.

Also, this needs to be at least somewhat cross-browser. Again, only wireframing. My wireframes should be able to work on anything that supports basic CSS.

Sorry if this is a duplicate question, I'm sure it is, but I couldn't find anything that quite matches my situation. Any help is much appreciated!

解决方案

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;

This will set a margin-top to the paragraph equal to the height of fixed header. However, this does not take padding or border into account. There are two possible solutions for this.

Use box-sizing: border-box on the header. This will make sure that the height, including padding and a border, will be the height as defined in the stylesheet. (I highly recommend using border-box on all your elements, like so: *, *:before, *:after {-moz-box-sizing:border-box;box-sizing: border-box;}.)

Another solution is adding the padding and border to the computed value in JavaScript, and include that value in the margin top that you set to p. I don't like this solution, but it works.

这篇关于在固定标题后添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！