89

我想为管理面板创建一个布局，但我不知道如何让 #nav 和 #content 容器始终位于浏览器窗口的 100%。我不明白 100% 高度属性的继承，有人可以更清楚地解释一下吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index.htm</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

        <div id="header">
            <img src="./img/header_logo.png" alt="bla"/>
        </div><!-- #header -->
        <div id="nav">
        </div><!-- #nav -->
        <div id="content">
        asfdg
        </div><!-- #content -->
        <div class="clear">
        </div>

</body>
</html>

main.css

    html, body{
    font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
img{
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}
#wrapper{

}
#header{
    background: url(img/header_bg.png) repeat-x;
    height: 65px;
    padding-top: 20px;
    padding-left: 25px;
}
#nav{
    width: 235px;
    float: left; 
    background-color: #f7f7f7;
    border-right: 1px solid #d9d9d9;
    height: 100%;

}
#content{
    float: left;
    width: auto;
    padding: 15px;

}
.clear{
    clear: both;
}

有任何想法吗？

4

3 回答 3

159

如果您的浏览器支持 CSS3，请尝试使用 CSS 元素Calc()

height: calc(100% - 65px);

您可能还想添加浏览器兼容性选项：

height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */

还要确保值之间有空格，请参阅：https ://stackoverflow.com/a/16291105/427622

于 2013-07-03T00:13:59.397 回答
16

正如评论中提到的 height:100% 依赖于显式定义的父容器的高度。实现您想要的一种方法是使用绝对/相对定位，并指定左/右/上/下属性以“拉伸”内容以填充可用空间。我已经实现了我收集到的你想要在 jsfiddle中实现的目标。尝试调整结果窗口的大小，您将看到内容自动调整大小。

在您的情况下，这种方法的限制是您必须在父容器上指定一个显式的 margin-top 以抵消其内容，以便为标题内容腾出空间。但是，如果您使用 javascript，您可以使其动态化。

于 2012-04-17T20:06:53.403 回答
4

对于“100% 的浏览器窗口”，如果你是字面意思，你应该使用固定定位。然后使用 top、bottom、right 和 left 属性将 div 的边缘从视口的相应边缘偏移：

#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}

这将设置一个屏幕，其中左侧 235 像素专用于导航，屏幕的其余部分用于内容。

但是请注意，您将无法一次滚动整个屏幕。overflow:auto尽管您可以通过应用到任一 div将其设置为单独滚动任一窗格。

另请注意：IE6 或更早版本不支持固定定位。

于 2012-04-17T19:55:38.757 回答