主页 / 问题 / 1117334
Accepted
IvaMuxa
Asked:2020-04-29 02:46:43 +0000 UTC2020-04-29 02:46:43 +0000 UTC

如何用 div 块垂直填充前后块之间的高度可用空间

  • 772

在没有使用 css 的脚本的情况下，红色块必须填充黄色和绿色之间的整个空间。除容器外，块的高度未知

div {
  border: solid 1px black;
}

#container {
  width: 100%;
  height: 150px;
  position: absolute;
}

#d1 {
  background-color: yellow;
}
#d2{
 background-color: red;
}
#d3 {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: green;
}
<div id="container">
  <div id="d1">1</div>
  <div id="d2">2</div>
  <div id="d3">3</div>
</div>

html

2 个回答

  1. Best Answer

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    body {
      height: 100%;
    }
    
    div {
      border: solid 1px black;
    }
    
    #container {
      min-height: 150px;
      height: 150px;
      display: flex;
      flex-direction: column;
    }
    
    .box {
      display: flex;
      flex-direction: column;
    }
    
    #d1 {
      background-color: yellow;
    }
    
    #d2 {
      background-color: red;
      flex: 1;
    }
    
    #d3 {
      background-color: green;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="box" id="d1">1</div>
    <div class="box" id="d2">2</div>
    <div class="box" id="d3">3</div>
  </div>
</body>

</html>

    • 2

  2. 使用 and 属性display:flex，height:auto您可以强制中央块填充块中的所有空闲空间#container。

    此解决方案仅在height明确设置第一个和第三个块的高度 ( ) 时才有效。

    #d1 {
    height:50px;
}
...
#d3 {
    height:50px;
}

    并且该属性position需要一个值relative（而不是absolute）。然后，当改变高度时，#container中央块将填充块之间的空闲空间，#d1并#d3

    div {
  border: solid 1px black;
  width: 100%;
  display: block;
}

#container {
  width: 100%;
  height: 150px;
  position: relative;
  display: flex;
  flex-flow: wrap row;
}

#d1 {
  background-color: yellow;
  height: 50px;
}

#d2 {
  background-color: red;
  height: 100%;
}

#d3 {
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: green;
}
    <div id="container">
  <div id="d1">1</div>
  <div id="d2">2</div>
  <div id="d3">3</div>
</div>

    • 0

相关问题