我想为管理面板创建一个布局,但我不知道如何将#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;
}
有任何想法吗？
Jim*_*use 114
如果您的浏览器支持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
Boj*_* Li 14
正如注释中所提到的:100%依赖于显式定义的父容器的高度.实现所需目标的一种方法是使用绝对/相对定位,并指定左/右/上/下属性以"拉伸"内容以填充可用空间.我已经实现了我想要在jsfiddle中实现的收集.尝试调整"结果"窗口的大小,您将看到内容自动调整大小.
在您的情况下,此方法的局限性在于您必须在父容器上指定显式margin-top以向下偏移其内容以为标题内容腾出空间.如果你扔javascript,你可以使它动态.
对于“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 像素用于导航，右侧其余部分用于内容。
但请注意，您将无法一次滚动整个屏幕。尽管您可以通过应用于任一 div 将其设置为单独滚动任一窗格overflow:auto。
另请注意：IE6 或更早版本不支持固定定位。
| 归档时间： |
|
| 查看次数： |
81219 次 |
| 最近记录： |