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

它能在HTML/CSS中完成吗?


当前回答

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

其他回答

这就是如何使你的侧导航与页面内容一样高,而不必改变主体为伸缩或表格。

不要将html或body的高度设置为100%,因为那样会使它只和浏览器视口一样高,页面会溢出,而你的导航只会和视口一样高。

只需将你的导航设置为高度:100%位置:绝对与html标签位置:相对。

The reason this works is because height 100% only works if its container is fixed height, with the exception (for some reason) the html tag. <html style='position:relative'> <body style='margin:0'> <div style='height:100%; position:absolute; top:0; background:linear-gradient(to bottom,red,green); border:2px solid blue'> nav </div> <div style='font-size:99px;padding:33px'> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> </div> </body> </html>

下面是我最终想出的解决方案,当使用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标签的高度,而不是视口。

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

height: 100svmax;

浏览器支持

简单,只是把它包装在一个表div…

HTML:

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

CSS:

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>

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

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