我在页面的左侧有一个导航栏，我想让它伸展到页面高度的100%。不仅是视口的高度，还包括滚动之前隐藏的区域。我不想用javascript来完成这个。
它能在HTML/CSS中完成吗?
当前回答
下面是我最终想出的解决方案，当使用div作为动态背景的容器时。
删除非后台使用的z索引。 删除全高列的左或右。 删除全宽行的顶部或底部。
编辑1:下面的CSS已经被编辑，因为它在FF和Chrome中没有正确显示。移动位置:相对于HTML上的位置，并将正文设置为height:100%而不是min-height:100%。
编辑2:添加额外的注释到CSS。上面增加了更多的说明。
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! */
}
html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
否则，云容器DIV将从HTML的布局上下文中移除。position: relative确保DIV在绘制时仍然在HTML框内，因此bottom:0指的是HTML框的底部。你也可以在云容器上使用height:100%，因为它现在指的是HTML标签的高度，而不是视口。
其他回答
我遇到了和你一样的问题。我想做一个DIV作为背景，为什么，因为它很容易通过javascript操作DIV。无论如何，我在css中为那个div做了三件事。
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
使用表格很简单:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
当DIV被引入时，人们非常害怕表格，可怜的DIV变成了隐喻的锤子。
如果你的目标是更现代的浏览器，事情可以非常简单。 试一试:
.elem{
height: 100vh;
}
如果你需要它在页面的50%，将100替换为50。
你可以使用伪列来作弊 或者您可以使用一些CSS技巧
下面是我最终想出的解决方案，当使用div作为动态背景的容器时。
删除非后台使用的z索引。 删除全高列的左或右。 删除全宽行的顶部或底部。
编辑1:下面的CSS已经被编辑，因为它在FF和Chrome中没有正确显示。移动位置:相对于HTML上的位置，并将正文设置为height:100%而不是min-height:100%。
编辑2:添加额外的注释到CSS。上面增加了更多的说明。
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! */
}
html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
否则，云容器DIV将从HTML的布局上下文中移除。position: relative确保DIV在绘制时仍然在HTML框内，因此bottom:0指的是HTML框的底部。你也可以在云容器上使用height:100%，因为它现在指的是HTML标签的高度，而不是视口。
