我在页面的左侧有一个导航栏，我想让它伸展到页面高度的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变成了隐喻的锤子。
其他回答
你可以使用伪列来作弊 或者您可以使用一些CSS技巧
Document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; ｝ < html > <头> <标题> < /名称> < / >头 身体< > <div id="page" style="background:green;" > < / div > < /身体> < / html >
这就是如何使你的侧导航与页面内容一样高，而不必改变主体为伸缩或表格。
不要将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…
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变成了隐喻的锤子。
