我在页面的左侧有一个导航栏，我想让它伸展到页面高度的100%。不仅是视口的高度，还包括滚动之前隐藏的区域。我不想用javascript来完成这个。
它能在HTML/CSS中完成吗?
当前回答
此代码工作，但不完全支持:
height: 100svmax;
浏览器支持
其他回答
你可以使用伪列来作弊 或者您可以使用一些CSS技巧
使用绝对位置。注意，这不是我们通常使用的绝对位置，它需要手动布局东西或有浮动对话框。这将在您调整窗口或内容大小时自动拉伸。我相信这需要标准模式，但可以在IE6及以上版本中工作。
只需要用你的内容替换id ' content'的div(这里指定的高度只是为了说明，你不需要在实际内容上指定高度。
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
这种工作方式是外部div作为导航栏的参考点。外部div由'content' div的内容展开。导航条使用绝对定位将自身延伸到其父div的高度。对于水平对齐，我们让内容div的偏移量与导航条的宽度相同。
这在CSS3 flex box模型中变得更加容易，但IE中还没有，并且有一些它自己的怪癖。
简单，只是把它包装在一个表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>
使用表格很简单:
<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变成了隐喻的锤子。
此代码工作，但不完全支持:
height: 100svmax;
浏览器支持
