我在页面的左侧有一个导航栏,我想让它伸展到页面高度的100%。不仅是视口的高度,还包括滚动之前隐藏的区域。我不想用javascript来完成这个。
它能在HTML/CSS中完成吗?
我在页面的左侧有一个导航栏,我想让它伸展到页面高度的100%。不仅是视口的高度,还包括滚动之前隐藏的区域。我不想用javascript来完成这个。
它能在HTML/CSS中完成吗?
当前回答
如果你的目标是更现代的浏览器,事情可以非常简单。 试一试:
.elem{
height: 100vh;
}
如果你需要它在页面的50%,将100替换为50。
其他回答
简单,只是把它包装在一个表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>
如果你的目标是更现代的浏览器,事情可以非常简单。 试一试:
.elem{
height: 100vh;
}
如果你需要它在页面的50%,将100替换为50。
在HTML5中,最简单的方法就是设置高度:100vh。其中“vh”代表浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。
Document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; } < html > <头> <标题> < /名称> < / >头 身体< > <div id="page" style="background:green;" > < / div > < /身体> < / html >
你可以使用伪列来作弊 或者您可以使用一些CSS技巧