我在页面的左侧有一个导航栏,我想让它伸展到页面高度的100%。不仅是视口的高度,还包括滚动之前隐藏的区域。我不想用javascript来完成这个。

它能在HTML/CSS中完成吗?


当前回答

Document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; } < html > <头> <标题> < /名称> < / >头 身体< > <div id="page" style="background:green;" > < / div > < /身体> < / html >

其他回答

此代码工作,但不完全支持:

height: 100svmax;

浏览器支持

如果你的目标是更现代的浏览器,事情可以非常简单。 试一试:

.elem{    
    height: 100vh;
 }

如果你需要它在页面的50%,将100替换为50。

下面是我最终想出的解决方案,当使用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;    
}
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}