Html 100% 高度减去标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10197565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% height minus header?
提问by nohayeye
I want to create a layout for an admin panel, but I dont know how to get the #nav and #content container always at 100% of the browser window. I don't understand the inherit of 100% height attributes, could someone explain it more clearly?
我想为管理面板创建一个布局，但我不知道如何让 #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;
}
any ideas?
有任何想法吗？
回答by Jim Clouse
If your browser supports CSS3, try using the CSS element Calc()
如果您的浏览器支持 CSS3，请尝试使用 CSS 元素 Calc()
height: calc(100% - 65px);
you might also want to adding browser compatibility options:
您可能还想添加浏览器兼容性选项：
height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */
also make sure you have spaces between values, see: https://stackoverflow.com/a/16291105/427622
还要确保值之间有空格，请参阅：https: //stackoverflow.com/a/16291105/427622
回答by Bojin Li
As mentioned in the comments height:100% relies on the height of the parent container being explicitly defined. One way to achieve what you want is to use absolute/relative positioning, and specifying the left/right/top/bottom properties to "stretch" the content out to fill the available space. I have implemented what I gather you want to achieve in jsfiddle. Try resizing the Result window and you will see the content resizes automatically.
正如评论中提到的 height:100% 依赖于显式定义的父容器的高度。实现您想要的一种方法是使用绝对/相对定位，并指定左/右/上/下属性以“拉伸”内容以填充可用空间。我已经实现了我想在 jsfiddle 中实现的目标。尝试调整结果窗口的大小，您将看到内容自动调整大小。
The limitation of this approach in your case is that you have to specify an explicit margin-top on the parent container to offset its contents down to make room for the header content. You can make it dynamic if you throw in javascript though.
在您的情况下，这种方法的局限性在于您必须在父容器上指定一个明确的 margin-top 以将其内容向下偏移，以便为标题内容腾出空间。不过，如果您使用 javascript，您可以使其动态化。
回答by Faust
For "100% of the browser window", if you mean this literally, you should use fixed positioning. The top, bottom, right, and left properties are then used to offset the divs edges from the respective edges of the viewport:
对于“100% 的浏览器窗口”，如果您是字面意思，则应使用固定定位。然后使用 top、bottom、right 和 left 属性从视口的各个边缘偏移 div 边缘：
#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}
This will set up a screen with the left 235 pixels devoted to the nav, and the right rest of the screen to content.
这将设置一个屏幕，左侧 235 像素专用于导航，屏幕右侧其余部分用于内容。
Note, however, you won't be able to scroll the whole screen at once. Though you can set it to scroll either pane individually, by applying overflow:autoto either div.
但是请注意，您将无法一次滚动整个屏幕。尽管您可以通过应用overflow:auto到任一 div将其设置为单独滚动任一窗格。
Note also: fixed positioning is not supported in IE6 or earlier.
另请注意：IE6 或更早版本不支持固定定位。
