我在页面的左侧有一个导航栏，我想让它伸展到页面高度的100%。不仅是视口的高度，还包括滚动之前隐藏的区域。我不想用javascript来完成这个。
它能在HTML/CSS中完成吗?
当前回答
使用表格很简单:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
当DIV被引入时，人们非常害怕表格，可怜的DIV变成了隐喻的锤子。
其他回答
我遇到了和你一样的问题。我想做一个DIV作为背景，为什么，因为它很容易通过javascript操作DIV。无论如何，我在css中为那个div做了三件事。
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
此代码工作，但不完全支持:
height: 100svmax;
浏览器支持
使用表格很简单:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
当DIV被引入时，人们非常害怕表格，可怜的DIV变成了隐喻的锤子。
在HTML5中，最简单的方法就是设置高度:100vh。其中“vh”代表浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。
你可以使用伪列来作弊 或者您可以使用一些CSS技巧
