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

它能在HTML/CSS中完成吗?


当前回答

我成功地

min-height: 100vh

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

其他回答

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

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

height: 100svmax;

浏览器支持

使用表格很简单:

<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技巧