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

它能在HTML/CSS中完成吗?


当前回答

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

#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;

其他回答

在HTML5中,最简单的方法就是设置高度:100vh。其中“vh”代表浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。

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

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

#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;

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

.elem{    
    height: 100vh;
 }

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

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

CSS:

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