Question

我需要在Bootstrap中使用这种样式的帮助。

HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-12 title">
         Loren Ipsum
        </div>
    </div>
    <div class="row fill-height">
        <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：

.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;
}

小提琴：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（supported browsers）就像这样：

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

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

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

4 个答案: