Question

我正在使用Bootstrap 3.

我正在使用占据视口高度100％的布局。我不希望页面滚动（这是一个管理页面）。

使用网格系统，我创建了2行，每行占50％的屏幕。这很有效。

问题：在这两行包含的单个单元格中，我放置了我想要溢出（滚动）的内容，因为屏幕调整了大小。不幸的是，除非我将一个固定高度以像素分配给此div，否则内容不会溢出。

问题：如何使内部div的溢出内容占据单元可用高度的100％，如果屏幕总高度的50％，它本身是什么？

JsFiddle：http://jsfiddle.net/StephanTual/nu83c/3/

<!-- Both section A and section B should take 100% of the height available to them.
The height available to each section is 50% of the total page height.
If either section contains more content that can fit, it should overflow: scroll -->


<div class="row full-height">

  <div class="col-md-3 full-height">

    <div class="row fifty-pc-height">
      <div class="col-md-12">
        <h4>Title for Section A</h4>
        <div class="overflow-container">
           a<br>
           a<br>
           a<br>           
           a<br>
           a<br>
           a<br>
           a<br>           
           a<br>
           a<br>
           a<br>
           a<br>           
           a<br>
        </div>
      </div>
    </div>

    <div class="row fifty-pc-height">
      <div class="col-md-12">
        <h4>Title for Section B</h4>
        <div class="overflow-container">
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
           b<br>
        </div>
      </div>
    </div>

  </div>

</div>

Answer 1

当您将full-height提供给col-md-12 div并让overflow-container获得一定百分比时，它会很好地滚动

<div class="row full-height">
  <div class="col-md-3 full-height">
    <div class="row fifty-pc-height">
      <div class="col-md-12 full-height">
        <h4>Title for Section A</h4>
        <div class="overflow-container">
        ...

.overflow-container {
    overflow-y: scroll;
    height: 70%;
}

请参见修改后的JSFiddle

更新

如果您很幸运地忽略旧浏览器，可以尝试flexbox。你可以添加

display: flex;
flex-direction: column;

到col-md-12 div

删除

height: 70%;

来自overflow-container并且您已完成，请参阅JSFiddle

您甚至可以删除一些div图层并将HTML缩小为

<div class="full-height container">
    <div class="overflow-wrapper">
        <h4>Title for Section A</h4>
        <div class="overflow-container">
        ...

让flexbox处理外部和内部维度

.container, .overflow-wrapper {
    display: flex;
    flex-direction: column;
}
.overflow-container {
    overflow-y: scroll;
}

JSFiddle

内部div使用100％的外部div的高度，它是基于％的

1 个答案: