Question

我的主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>

我不想隐藏滚动条，所以在我的情况下，请不要scroll:hidden在蓝色div内有东西，因此将其隐藏在滚动条中的一半。使其正常运行的唯一方法是使蓝色div合适

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

Answer 1

我修改您的Codepen以实现此目的。基本上：

divB的填充顶部等于divA的高度。
divA将position设置为absolute
将Overflow的divB设置为auto，因此，当divB中的内容溢出时，只有滚动条才会出现。

Codepen

Answer 2

除非您正在寻找对旧版浏览器的支持，否则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>

使div内的2 div共享空间

2 个答案: