我正在使用Bootstrap 3。

我使用的布局占据了视口高度的100%。我不希望页面滚动(这是一个管理页面)。

使用网格系统,我创建了两行,每行占据了屏幕的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>

最佳答案

当您将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

08-06 03:26
查看更多