jQuery 在 html 中定位固定标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10975268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
position fixed header in html
提问by Sowmya
I have a header (dynamic height) with a fixed position.
我有一个固定位置的标题（动态高度）。
I need to place the container div right below the header. As the header height is dynamic, I can't use the fixed value for top margin.
我需要将容器 div 放在标题下方。由于标题高度是动态的，我不能使用固定值作为上边距。
How can this be done?
如何才能做到这一点？
Here's my CSS:
这是我的 CSS：
#header-wrap {
position: fixed;
height: auto;
width: 100%;
z-index: 100
}
#container{
/*Need to write css to start this div below the fixed header without mentioning top margin/paading*/
}
...and HTML:
...和 HTML：
<div id="header-wrap">
<div id="header">
<div id="menu">
<ul>
<li><a href="#" class="active">test 0</a></li>
<li><a href="#">Give Me <br />test</a></li>
<li><a href="#">My <br />test 2</a></li>
<li><a href="#">test 4</a></li>
</ul>
</div>
<div class="clear">
</div>
</div>
</div><!-- End of header -->
<div id="container">
</div>
采纳答案by Sowmya
Well! As I saw my question now, I realized that I didn't want to mention fixed margin value because of the dynamic height of header.
好！当我现在看到我的问题时，我意识到由于标题的动态高度，我不想提及固定边距值。
Here is what I have been using for such scenarios.
这是我在此类场景中使用的内容。
Calculate the header height using jQuery and apply that as a top margin value.
使用 jQuery 计算标题高度并将其应用为顶部边距值。
var divHeight = $('#header-wrap').height();
$('#container').css('margin-top', divHeight+'px');
回答by micnic
Your #container should be outside of the #header-wrap, then specify a fixed height for #header-wrap, after, specify margin-top for #container equal to the #header-wrap's height. Something like this:
你的#container 应该在#header-wrap 之外，然后为#header-wrap 指定一个固定的高度，之后，为#container 指定margin-top 等于#header-wrap 的高度。像这样的东西：
#header-wrap {
position: fixed;
height: 200px;
top: 0;
width: 100%;
z-index: 100;
}
#container{
margin-top: 200px;
}
Hope this is what you need: http://jsfiddle.net/KTgrS/
希望这是你需要的：http: //jsfiddle.net/KTgrS/
回答by Sorter
body{
margin:0;
padding:0 0 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:25;
}
@media screen{
body>div#header{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
回答by nbrooks
I assume your header is fixed because you want it to stay at the top of the page even when the user scrolls down, but you dont want it covering the container. Setting position: fixedremoves the element from the linear layout of the page however, so you would need to either set the top margin of the "next" element to be the same as the height of the header, or (if for whatever reason you don't want to do that), put a placeholder element which takes up space in the page flow, but would appear underneath where the header shows up.
我假设您的标题是固定的，因为即使用户向下滚动，您也希望它保持在页面顶部，但您不希望它覆盖容器。position: fixed但是，设置会从页面的线性布局中删除元素，因此您需要将“下一个”元素的上边距设置为与标题的高度相同，或者（如果出于某种原因您不这样做）想要这样做），放置一个占位符元素，该元素占用页面流中的空间，但会出现在标题显示的下方。
回答by RAN
The position :fixedis differ from the other layout.
Once you fixedthe positionfor your header, keep in mind that you have to set the margin-topfor the contentdiv.
这position :fixed是不同于其他布局。一旦你fixed在position你的header，记住，你必须设置margin-top的content股利。
回答by stay_hungry
set #container div topto zero
将#container div top设置为零
#container{
top: 0;
}
