100% 高度减去标题？ [复制]答案

【问题标题】：100% height minus header? [duplicate]100% 高度减去标题？ [复制]
【发布时间】：2012-04-29 03:59:49
【问题描述】：

我想为管理面板创建一个布局，但我不知道如何让 #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;
}

有什么想法吗？

【问题讨论】：

你需要支持哪些浏览器（尤其是IE）？
不幸的是，height:100% 依赖于显式定义的父容器的高度。否则，浏览器引擎不知道什么是 100%。最好的方法是通过带有窗口调整大小事件的 javascript。
+1。 100% 减去 CSS 中一个不错的功能！例如。在需要 100% 减去一些填充/边框的情况下...嗯，这是旧的非标准 IE 框模型的最大优势:-)
@Tomas 你玩过 box-sizing CSS 属性吗？示例jsfiddle.net/post_erasmus/gP5bc。它允许您设置盒子尺寸并强制填充和边框（或只是填充）从盒子尺寸向内呈现。
@nohayeye 您是否在下面的答案中查看了我的 jsfiddle 链接？我相信它符合您想要实现的目标。

标签： html css

【解决方案1】：

如果您的浏览器支持 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

【讨论】：

这也适用于100vh（视口高度）。
当心，vh 不适用于 Safari。
@kingPuppy - vh 似乎在 Safari 中得到了可靠的支持，只有 iOS 7.1 需要轻微的解决方法：caniuse.com/#search=vh
谢谢！！！！如果您想使用 calc vh，这也可以！
快速说明：计算变量之间的空格是必需的，calc(100%-65px) 不起作用。

【解决方案2】：

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

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

【讨论】：

但是当内容大于 div 的大小时，如何确保 Navbar 和 Main 内容都不会扩展？比如this fiddle
@FelipeLeão 您可以在#nav 和#content 中添加“overflow-y: scroll”或“overflow-y: hidden”。
请将内容添加到您的答案中，因为该链接在某些时候可能会过时。

【解决方案3】：

对于“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 或更早版本不支持固定定位。

【讨论】：

这就是很多 HTML5 应用程序的布局方式。例如，谷歌浏览器中的扩展窗口实际上是一个左侧导航固定定位的网页。您可以根据自己的意愿滚动页面的其余部分，并且导航会停留在那里。只要用户调整视口的高度足以容纳您的导航，就可以了。