100%高度减去标题?

我想创build一个pipe理面板的布局,但我不知道如何获得#nav和#content容器始终在浏览器窗口的100%。 我不明白100%高度属性的inheritance,有人可以更清楚地解释它吗?

<!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; } 

有任何想法吗?

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

正如在注释高度中提到的那样:100%依赖于明确定义的父容器的高度。 一种实现你想要的方法是使用绝对/相对定位,并指定左/右/上/下属性来“扩展”内容以填充可用空间。 我已经实现了我想要在jsfiddle中实现的目标 。 尝试调整结果窗口的大小,你会看到内容自动resize。

在你的情况下,这种方法的局限性是你必须在父容器上指定一个明确的margin-top来将其内容向下偏移,以为头部内容腾出空间。 你可以使它dynamic,如果你扔JavaScript。

对于“浏览器窗口的100%”,如果你是这个意思,你应该使用固定的位置。 然后使用顶部,底部,右侧和左侧属性来偏移视口各边的div边缘:

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

这将设置一个屏幕,左侧235像素专门用于导航,屏幕右侧余下的内容。

但请注意,您将无法一次滚动整个屏幕。 虽然您可以将其设置为单独滚动其中一个窗格,方法是将overflow:auto应用于任一div。

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