我有2个div:
>页面顶部的标题div,高度为150px.
>一个位于头部div下面的容器div.
我想要的是容器div是动态的,并调整到标题div下面剩余空间的100%.
我尝试放置高度:100%,但这使得页面需要滚动.我认为它是使div的100%的浏览器高度,而不是剩余身体的高度的100%.
我如何做到这一点,使容器div只是将其高度调整到剩余的身体空间?
- 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;
- }
兼容性:在most modern browsers and IE 9 +支持calc()
- 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>