html - 使div内的2 div共享空间

This question already has answers here:

Flexbox fill available space vertically
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
我在主div中有2个div divA和divB，

divA排名靠前，就像头衔保持榜首一样，他的身高固定。
divB是内容，应该占据剩下的所有空间，直到底部为止。

divA的像素大小。
divB应该做100％的高度-divA大小

    #container{
  width:400px;
  height:800px;
  background-color:red;
  position:relative;
  overflow: scroll;
}

#options{
  width:95%;
  height:30px;
  background: #734A6F;
  position: relative;
  color: #FFF;
  line-height: 33px;
  padding-left: 10px;
}

#buttons{
    position:absolute;
    width:95%;
    height:100%;
    background-color:blue;
}

<div id="container">
  <div id="options">

  </div>
   <div id="buttons">

  </div>
</div>

我不想隐藏滚动条，所以在我的情况下，请不要在蓝色div内有scroll:hidden的内容，因此它将隐藏在滚动条中，并且将其切成两半。使其正常工作的唯一方法是将其设置为蓝色div

https://codepen.io/crocsx-the-styleful/pen/GYLKKj

最佳答案

除非您正在寻找非常旧的浏览器支持，否则CSS flexbox会非常简单。

display: flex; // use flexbox
flex-direction: column; // set flexbox to vertical
justify-content: flex-start; // start at the top

flex-basis: 30px; // how much height it takes up

flex: 2; // any number greater than 1 will cause it to fill the space

#container {
  width: 400px;
  height: 600px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#options {
  background: green;
  flex-basis: 30px;
}

#buttons {
  background: blue;
  flex: 2;
}

<div id="container">
  <div id="options">
    Div A
  </div>
  <div id="buttons">
    Div B
  </div>
</div>

关于html - 使div内的2 div共享空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53038005/