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