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

它能在HTML/CSS中完成吗?


当前回答

我也遇到过类似的问题,解决方法是这样的:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

我想要一个以页面为中心的div高度100%的页面高度,所以我的总解决方案是:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

你可能需要让一个父元素(或简单的“body”)具有位置:relative;

其他回答

使用表格很简单:

<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变成了隐喻的锤子。

在HTML5中,最简单的方法就是设置高度:100vh。其中“vh”代表浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。

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

.elem{    
    height: 100vh;
 }

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

我也遇到过类似的问题,解决方法是这样的:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

我想要一个以页面为中心的div高度100%的页面高度,所以我的总解决方案是:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

你可能需要让一个父元素(或简单的“body”)具有位置:relative;

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