我有2个div：
@H_301_2@>页面顶部的标题div,高度为150px.
>一个位于头部div下面的容器div. @H_301_2@我想要的是容器div是动态的,并调整到标题div下面剩余空间的100％. @H_301_2@我尝试放置高度：100％,但这使得页面需要滚动.我认为它是使div的100％的浏览器高度,而不是剩余身体的高度的100％. @H_301_2@我如何做到这一点,使容器div只是将其高度调整到剩余的身体空间？ @H_301_2@请查询以下相关代码：
>一个位于头部div下面的容器div. @H_301_2@我想要的是容器div是动态的,并调整到标题div下面剩余空间的100％. @H_301_2@我尝试放置高度：100％,但这使得页面需要滚动.我认为它是使div的100％的浏览器高度,而不是剩余身体的高度的100％. @H_301_2@我如何做到这一点,使容器div只是将其高度调整到剩余的身体空间？ @H_301_2@请查询以下相关代码：
body,html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: 100%;
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div> <div id="container"></div>
解决方法
您可以通过使用与
calc() CSS function的一些数学来简单地做到这一点.从100％减去150px(标题大小).这是动态计算的.
body,html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
@H_301_2@兼容性：在most modern browsers and IE 9 +支持calc()
@H_301_2@示例fiddle和以下代码片段
body,html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div> <div id="container"></div>
