Question

我正在尝试设置一个菜单div A，其下方有一个内容容器div B。它们都嵌套在父div C中。如果div B内的内容高于div B，则需要在div B上显示滚动条。

我遇到的主要问题是div A高度未知，随着内容在运行时通过JavaScript添加和删除，我可以随时更改，我希望div B填写剩余的父高，同时保持其内容的可滚动性。

我正在寻找一个仅限CSS的解决方案，因为我正在处理的应用程序已经JS很重，我希望避免增加更多的膨胀。

我的问题的简化版本： https://jsfiddle.net/uf3frdjv/

Answer 1

使用flexbox可以解决您的问题。

一个简单的例子：

.C {
  display: flex; /* this enables flex layout */
  flex-direction: column; /* child divs are placed in column */
}
.A {
  flex: 0 0 auto; /* div A should remain its original height (neither expand nor shrink) */
}
.B {
  flex: 1 1 auto; /* div B should fit the remaining space */
  overflow-y: auto; /* enable scroll bar when div D exceeds div B's height */
}

有关实例，请参阅此fiddle

Answer 2

您可以使用设置为父display:flex的{{1}}和flex-direction: column;以及设置为div#C底部的overflow-y:scroll的组合来实现它。

当div#B和height:100%高度的总和不足以填充div#B时，您还会为div#A设置div#B以填充空白区域身高，就像这样：

JS Fiddle

div#C

#C {
  width: 300px;
  height: 400px;
  border: 2px solid tomato;
  display:flex;
  flex-direction: column;
}
#A { background-color:skyblue; }
#B { height:100%; background-color:orange; overflow-y:scroll; }

资源：

Answer 3

这也可以通过CSS Grid实现，now has more support比第一次问这个问题时要好，我发现它的语法比flexbox更容易理解。

使用@rhgb中的示例：

HTML

<div class="C">
  <div class="A"></div>
  <div class="B">
    <div class="D"></div>
  </div>
</div>

CSS

.C {
  width: 100px;
  height: 300px;
  background: #ccc;

  display: grid;
  /* 
     Fix the first row's height to 100px and 
     fill the rest of the available space 
     with the second row: 
  */
  grid-template-rows: 100px 1fr;
}
.A {
  background: #999;
}
.B {
  background: #666;
  padding: 5px;
  overflow: auto;
}
.D {
  height: 400px;
  background: #333;
}

Answer 4

@rhgb接受的答案是正确的方向，但是缺少一些属性，例如父级需要固定的高度，并且还添加了一些不必要的属性，例如flex属性。

此外，.B的底部在链接到的经过修饰的地方被切除。

我已在此处更正了这些问题：

.C {

  height: 400px; /*  A fixed height on parent is required */
  display: flex; /* required */
  flex-direction: column; /* required */     
  background: #ccc;
  width: 300px;
}

.A {
  background: #ccc;
  padding: 0 20px;
}

.B {
  overflow: hidden; /* required */
  background: #227ddb;
  padding: 20px;
}

.D {

  overflow: auto; /* required */
  height: calc(100% - 20px); /* required - subtract the sum of padding-top and padding-bottom from .B, otherwise you lose the bottom of .B */
  padding: 10px;
  background: #eee;   
}

<div class="C">
  <div class="A">
    <h1> Header</h1>
  </div>
  <div class="B">
    <div class="D">
      <div>
        Div D Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt augue id tortor ultrices ultrices. Integer dictum lorem vel nunc ultrices, a dignissim arcu eleifend. Pellentesque in metus orci. Praesent pulvinar leo sed sodales aliquet.
        Etiam cursus nibh dolor, nec viverra magna luctus tincidunt. Nulla mollis finibus nisi eu viverra. Duis quis lorem et enim tempor scelerisque. Etiam vitae neque in ante blandit porta eget in massa. Sed fermentum at nisl ut convallis. Curabitur
        convallis dui in tortor hendrerit, sit amet lobortis tellus euismod. Vestibulum dui velit,yy rutrum sit amet neque et, bibendum interdum enim. Pellentesque orci ligula, viverra quis massa vel, ultrices auctor purus. Pellentesque scelerisque suscipit
        est in efficitur.

      </div>
    </div>
  </div>
</div>

Answer 5

我也遇到了同样的问题，但是布局更加复杂。

但是如果它将来可以帮助其他任何人，那么我就是这样做的： https://jsfiddle.net/jtsknrLb/5/

在此示例中，垂直滚动条不会像前面的示例中那样溢出父级

* {
  box-sizing: border-box;
}

div.c {
  width: 500px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: fixed;
}

div.a {
  background-color: blue;
  color: white;
  padding: 12px;
  display: flex;
  flex: 0 0 auto;
}

div.b {
  display: flex;
  overflow: hidden;
  flex: 1 1 auto;
  background-color: red;
  color: white;
}

div.d {
  overflow-y: scroll;
  padding: 12px;
  height: 100%;
}

<div class="c">
  <div class="a">
    some content
    <br>
    in the header
  </div>
  <div class="b">
    <div class="d">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

子DIV用可滚动内容填充剩余高度

5 个答案: