CSS Div伸展100％页面高度 [英] CSS Div stretch 100% page height
问题描述
我在页面的左侧有一个导航栏，我希望它伸展到100％的页面高度。不只是视口的高度，还包括隐藏的区域，直到滚动。
这是我使用div作为动态背景的容器时最终得出的解决方案。
- 移除非背景使用的
z-index。 - 删除
左 $ c c $ c $ c或
编辑1 ：：以下CSS已被编辑，因为它在FF和Chrome中无法正确显示。将位置：相对移动到HTML上，并将正文设置为 height：100％，而不是 min-height：100％。
EDIT 2：
CSS：
html {
min-height：100％; / *确保它至少与视口一样高* /
position：relative;
}
body {
height：100％; / *强制BODY元素匹配HTML元素的高度* /
}
＃cloud-container {
position：absolute;
top：0;
bottom：0;
left：0;
right：0;
overflow：hidden;
z-index：-1; / *如果它不会是一个背景，删除这一行！ * /
}
html：
<！doctype html>
< html>
< body>
< div id =cloud-container>< / div>
< / body>
< / html>
为什么？
code> html {min-height：100％; position：relative;}
云容器DIV从HTML的布局上下文中删除。 position：relative 确保DIV在绘制时保留在HTML框内，以便 bottom：0 底部的HTML框。您还可以在云容器上使用 height：100％，因为它现在指的是HTML标记的高度，而不是视口。
I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
Can it be done in HTML/CSS?
Here is the solution I finally came up with when using a div as a container for a dynamic background.
- Remove the
z-indexfor non-background uses. - Remove
leftorrightfor a full height column. - Remove
toporbottomfor a full width row.
EDIT 1: CSS below has been edited because it did not show correctly in FF and Chrome. moved position:relative to be on the HTML and set the body to height:100% instead of min-height:100%.
EDIT 2: Added extra comments to CSS. Added some more instructions above.
The CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
The html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
Without this the cloud-container DIV is removed from the HTML's layout context. position: relative ensures that the DIV remains inside the HTML box when it is drawn so that bottom:0 refers to the bottom of the HTML box. You can also use height:100% on the cloud-container as it now refers to the height of the HTML tag and not the viewport.
这篇关于CSS Div伸展100％页面高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
