Question

我试图找到一种方法来根据其兄弟元素的高度来计算元素的高度。在下面的代码片段中，一个和三个孩子的高度为20％，最大高度为70px。无论容器大小是变量height: calc(100vh - 12vmin - 40px);，我都需要找到一种让孩子2填充高度的其余部分的方法。我已经尝试了媒体查询和calc（）函数，但由于容器高度的变化，它们都没有工作。我在想我需要使用JS，但没有它的任何解决方案都是可取的。

感谢您的帮助！

P.S。如果您有JS解决方案，请使用vanilla JS。

#container {
  border: 4px solid #000000;
  box-sizing: border-box;
  height: calc(100vh - 12vmin - 40px);
  max-width: 600px;
  width: 100%;
}

#childOne {
  border: 2px solid blue;
  box-sizing: border-box;
  height: 20%;
  max-height: 70px;
}

#childTwo {
  border: 2px solid red;
  box-sizing: border-box;
  height: 60%;
}

#childThree {
  border: 2px solid yellow;
  box-sizing: border-box;
  height: 20%;
  max-height: 70px;
}

<div id="container">
  <div id="childOne"></div>
  <div id="childTwo"></div>
  <div id="childThree"></div>
</div>

Answer 1

CSS flexbox是要走的路。

将容器的高度更改为height: 100vh，添加display: flex和flex-direction: column。

对于childTwo，完全删除高度设置并添加flex:1。

＆＃13;

    body {
        margin: 0;
        padding: 0;
    }
    
    #container {
      border: 4px solid #000000;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: 100vh;
      max-width: 600px;
      width: 100%;
    }

    #childOne {
      border: 2px solid blue;
      box-sizing: border-box;
      height: 20%;
      max-height: 70px;
    }

    #childTwo {
      border: 2px solid red;
      box-sizing: border-box;
      flex: 1;
    }

    #childThree {
      border: 2px solid yellow;
      box-sizing: border-box;
      height: 20%;
      max-height: 70px;
    }

＆＃13;

    <div id="container">
      <div id="childOne"></div>
      <div id="childTwo"></div>
      <div id="childThree"></div>
    <div>

＆＃13;

如何根据兄弟元素维度计算元素维度？

1 个答案: