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

它能在HTML/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 >

其他回答

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

我成功地

min-height: 100vh

对于两者,菜单和内容div。

你可以使用伪列来作弊 或者您可以使用一些CSS技巧

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

height: 100svmax;

浏览器支持

Document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; } < html > <头> <标题> < /名称> < / >头 身体< > <div id="page" style="background:green;" > < / div > < /身体> < / html >