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

它能在HTML/CSS中完成吗?


当前回答

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

height: 100svmax;

浏览器支持

其他回答

我成功地

min-height: 100vh

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

简单,只是把它包装在一个表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>

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

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

如果你的目标是更现代的浏览器,事情可以非常简单。 试一试:

.elem{    
    height: 100vh;
 }

如果你需要它在页面的50%,将100替换为50。