时间戳

首页 > 解决方案 > 如何设置动态div高度

html - 如何设置动态div高度

问题描述

有以下 HTML：

body {
  padding: 10px;
  border: 2px solid black;
  margin: 2px;
}
.div1 {
  height: 50px;
  border: 2px solid black;
}
.div2 {
  /* height: ??? */
  border: 2px solid black;
  margin-top: 2px;
  margin-bottom: 2px;
}
<body>
  <div id="div1" class="div1"></div>
  <div id="div2" class="div2"></div>
</body>

的高度div1应始终为静态 50px，父空间的其余部分应填充div2. 例如，

if body.height == 700px then 
    div1.height = 50px
    div2.height = 650px

如何定义和设置这个动态高度div2？

标签： htmlcss

解决方案

如果以上是您的确切情况，那么您可以使用 csscalc()

所以，像这样设置你的CSS：

#div1{
   height:50px;
}
#div2{
   height:calc(100% - 50px);
}

只要身体上有定义的高度，这应该有效

推荐阅读