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

它能在HTML/CSS中完成吗?


当前回答

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

height: 100svmax;

浏览器支持

其他回答

我也遇到过类似的问题,解决方法是这样的:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

我想要一个以页面为中心的div高度100%的页面高度,所以我的总解决方案是:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

你可能需要让一个父元素(或简单的“body”)具有位置:relative;

我遇到了和你一样的问题。我想做一个DIV作为背景,为什么,因为它很容易通过javascript操作DIV。无论如何,我在css中为那个div做了三件事。

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}

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

* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}

你可以使用伪列来作弊 或者您可以使用一些CSS技巧