我在页面的左侧有一个导航栏，我想让它伸展到页面高度的100%。不仅是视口的高度，还包括滚动之前隐藏的区域。我不想用javascript来完成这个。
它能在HTML/CSS中完成吗?
当前回答
如果你的目标是更现代的浏览器，事情可以非常简单。 试一试:
.elem{
height: 100vh;
}
如果你需要它在页面的50%，将100替换为50。
其他回答
在HTML5中，最简单的方法就是设置高度:100vh。其中“vh”代表浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。
我也遇到过类似的问题，解决方法是这样的:
#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;
此代码工作，但不完全支持:
height: 100svmax;
浏览器支持
这就是如何使你的侧导航与页面内容一样高，而不必改变主体为伸缩或表格。
不要将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作为背景，为什么，因为它很容易通过javascript操作DIV。无论如何，我在css中为那个div做了三件事。
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
