填充Bootstrap中相对和绝对div之间的差距

Question

我需要一些有关 Bootstrap 中这种样式的帮助。

 .title { background-color:green; } .fill-height { position:relative; height:100vh; } .div1 { background-color:red; min-height:100px; } .div2 { background-color:blue; } .div3 { background-color:yellow; min-height:50px; width:100%; position:absolute; bottom:0; left:0; right:0; }

 <div class="container"> <div class="row"> <div class="col-xs-12 title"> Lorem Ipsum </div> </div> <div class="row fill-height"> <div class="col-xs-12 div1"> Loren Ipsum </div> <div class="col-xs-12 div2"> Lorem Ipsum </div> <div class="col-xs-12 div3"> Lorem Ipsum </div> </div> </div>

小提琴： https : //jsfiddle.net/DTcHh/27543/

我需要的是：

1) 用蓝色 div 填充红色和黄色 div 之间的空隙。

2）使第二row具有屏幕其余部分的全高。 100vh在这种情况下效果不佳，因为它没有考虑第一row的高度。

任何帮助表示赞赏，

谢谢！

Answer 1

如果我正确理解您的问题，您可以在蓝色 div 上使用它

position: absolute;
top: 100px;
height: calc(100% - 50px);
width: 100%;

然后添加

overflow: hidden;

在填充高度 div 上。

Answer 2

好吧，您可以在代码中添加一些样式，可能对您有用

.div2 {
    height: 100%;
}
.div3 {
    bottom: -100px;
}

Answer 3

全屏打开查看结果

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } .title { background-color: green; } .fill-height { position: relative; height: 100vh; } .div1 { background-color: red; height: 100px; } .div2 { background-color: blue; position: absolute; top: 100px; bottom: 50px; width: 100%; } .div3 { background-color: yellow; height: 50px; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; }

 <div class="container"> <div class="row"> <div class="col-xs-12 title"> first Row Loren Ipsum </div> </div> <div class="row fill-height"> <div class="col-xs-12 div1"> second reow div 1 Loren Ipsum </div> <div class="col-xs-12 div2"> Loren Ipsum </div> <div class="col-xs-12 div3"> Loren Ipsum </div> </div> </div>

Answer 4

如果您绝对需要通过 CSS 而不使用 javascript 来完成，那么我想到的第一个解决方案是使用display: table ：

HTML

<div class="container">
  <div class="row fill-height">
    <div class="col-xs-12 title">
     Loren Ipsum
    </div>
    <div class="col-xs-12 div1">
    Loren Ipsum
    </div>
    <div class="col-xs-12 div2">
    Loren Ipsum
    </div>
    <div class="col-xs-12 div3">
    Loren Ipsum
    </div>
  </div>
</div>

CSS

.fill-height {
    height:100vh;
    display: table;
    width: 100%; }
.fill-height:before, .fill-height:after { content: none; }
.fill-height > * { display: table-row; }

你可能想要

.title { height: 30px; }

或者正如@samisonline 指出的那样，使用calc （支持的浏览器），如下所示：

.div2 {
   position: absolute;
   top: 100px;
   height: calc(100% - 150px);
   width: 100%; }

要减去的像素是 150 作为 div1 和 div3 高度的总和：不需要任何overflow: hidden