我正在使用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