Question

有以下 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 的动态高度？

Answer 1

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

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

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

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

Answer 2

网格、填充和框大小将在此处帮助您：

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  padding: 2px;
  height: 100%;
}

body {
  padding: 10px;
  border: 2px solid black;
  /* added*/
  min-height: 100%;
  display: grid;
  grid-template-rows: 50px 1fr;
  gap: 2px;
}

.div1 {
  border: 2px solid black;
}

.div2 {
  border: 2px solid black;
  margin-top: 2px;
  margin-bottom: 2px;
}

<body>
  <div id="div1" class="div1"></div>
  <div id="div2" class="div2"></div>
</body>

Answer 3

你可以使用 css flexbox

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.div1 {
  height: 50px;
  border: 1px solid red;
}
.div2 {
  flex-grow: 1;
  border: 1px solid green;
}

如何设置动态div高度

3 个答案: