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

我需要在Bootstrap中使用此样式的一些帮助。在Bootstrap中填充相对和绝对div之间的差距

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的高度。

任何帮助表示赞赏，

谢谢！

来源

2016-12-01 Esteban Cazorla

如果我理解你的问题的权利，你可以使用这个蓝色的div

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

然后在填充高度的div添加

overflow: hidden;

。

来源

2016-12-01 11:15:58 samisonline

嗨！谢谢，但我忘了说divs的高度可能因为内容而改变，所以在这种情况下使用calc（）和固定值并不是一个好主意。 –

我将高度改为最小高度，这样更有意义 –

那么你可以添加在你的代码中的一些风格可能是对你的工作

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

来源

2016-12-01 11:17:22

与我在其他回复中评论的一样：其他div的高度可能因内容而改变。谢谢！ –

打开全屏查看结果

/* 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>

来源

2016-12-01 11:37:49

和我在其他回复中评论的一样：其他divs的高度可能因内容而改变，我将固定高度更改为最小高度。 –

如果你绝对需要通过不使用javascript的CSS来实现，那么我想到的第一个解决方案是使用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

来源

2016-12-01 11:46:35 Giovazz89

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

回答

相关问题