100% 高度减去头部？

我想创建一个管理面板的布局，但我不知道如何获得 # 导航和 # 内容容器总是在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>

主控制系统

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

有什么想法吗？

130640 次浏览
小开

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:

#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.

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:auto to either div.

Note also: fixed positioning is not supported in IE6 or earlier.

小开

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.

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.

小开
最佳答案

If your browser supports CSS3, try using the CSS element 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


提交答案