javascript – 将div的高度设置为标题下剩余空间的100%

前端之家收集整理的这篇文章主要介绍了javascript – 将div的高度设置为标题下剩余空间的100%前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有2个div:

>页面顶部的标题div,高度为150px.
>一个位于头部div下面的容器div.

我想要的是容器div是动态的,并调整到标题div下面剩余空间的100%.

我尝试放置高度:100%,但这使得页面需要滚动.我认为它是使div的100%的浏览器高度,而不是剩余身体的高度的100%.

我如何做到这一点,使容器div只是将其高度调整到剩余的身体空间?

查询以下相关代码

  1. body,html {
  2. margin: 0;
  3. height: 100%;
  4. }
  5. #header {
  6. width: 100%;
  7. height: 150px;
  8. background-color: #999999;
  9. }
  10. #container {
  11. width: 760px;
  12. height: 100%;
  13. background-color: #CCCCCC;
  14. margin: 0 auto;
  15. }
  1. <div id="header"></div>
  2. <div id="container"></div>

解决方法

您可以通过使用与 calc() CSS function的一些数学来简单地做到这一点.从100%减去150px(标题大小).这是动态计算的.
  1. body,html {
  2. margin: 0;
  3. height: 100%;
  4. }
  5. #header {
  6. width: 100%;
  7. height: 150px;
  8. background-color: #999999;
  9. }
  10. #container {
  11. width: 760px;
  12. height: calc(100% - 150px);
  13. background-color: #CCCCCC;
  14. margin: 0 auto;
  15. }

兼容性:在most modern browsers and IE 9 +支持calc()

示例fiddle和以下代码片段

  1. body,html {
  2. margin: 0;
  3. height: 100%;
  4. }
  5. #header {
  6. width: 100%;
  7. height: 150px;
  8. background-color: #999999;
  9. }
  10. #container {
  11. width: 760px;
  12. height: calc(100% - 150px);
  13. background-color: #CCCCCC;
  14. margin: 0 auto;
  15. }
  1. <div id="header"></div>
  2. <div id="container"></div>

猜你在找的JavaScript相关文章