Bootstrap 3 - 列内自定义div的100%高度
Seo*_*Lee 60 css twitter-bootstrap
假设我连续两列.
一个包含class="img-responsive"用于流体图像的图像,另一个包含用于自定义div块的图像.
我的问题是如何让这个自定义div的高度100%.以下对我不起作用.
height: auto;
max-width: 100%;
如果我在高度上设置固定值,它将无法与包含图像的列很好地匹配,因为当视口大小更改时图像会调整高度.
我可以通过执行以前问题所建议的以下内容来获得列高度相等.
class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
但我的情况略有不同,我需要在列中使用自定义div,它设置与图像高度相等的高度,而不是父div(列).
You*_*taf 55
我只是在寻找一个熟悉的问题,我发现了这个:
.div{
height : 100vh;
}
更多信息
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
- `vh`是用视口高度而不是父div来调整它的大小 (12认同)
Chr*_*ina 26
最初的问题是关于Bootstrap 3并支持IE8和9,因此Flexbox将是最佳选择,但由于缺乏支持,它不是我的答案的一部分,请参阅http://caniuse.com/#feat=flexbox并切换IE框.很糟糕,嗯？
2种方式:
1.显示表: 您可以将行转换为显示:表格和颜色显示:table-cell.它的工作原理是表格的局限性,其中的限制是推拉和偏移不起作用.另外,我不知道你在哪里使用它 - 在什么断点.您应该使图像全宽并将其包装在另一个容器中以将填充放在那里.此外,您需要在移动设备上找出设计,这适用于768px及以上.当我使用它时,我重新声明了尺寸,有时我会将重要部分放在它们上面,因为表格占据了内部的内容宽度,因此再次声明宽度有助于此.你需要玩游戏.我也使用脚本,但您必须更改较少的文件才能使用它,否则它将无法响应.
演示:http://jsbin.com/EtUBujI/2
.row.table-row > [class*="col-"].custom {
background-color: lightgrey;
text-align: center;
}
@media (min-width: 768px) {
img.img-fluid {width:100%;}
.row.table-row {display:table;width:100%;margin:0 auto;}
.row.table-row > [class*="col-"] {
float:none;
float:none;
display:table-cell;
vertical-align:top;
}
.row.table-row > .col-sm-11 {
width: 91.66666666666666%;
}
.row.table-row > .col-sm-10 {
width: 83.33333333333334%;
}
.row.table-row > .col-sm-9 {
width: 75%;
}
.row.table-row > .col-sm-8 {
width: 66.66666666666666%;
}
.row.table-row > .col-sm-7 {
width: 58.333333333333336%;
}
.row.table-row > .col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.row.table-row > .col-sm-3 {
width: 25%;
}
.row.table-row > .col-sm-2 {
width: 16.666666666666664%;
}
.row.table-row > .col-sm-1 {
width: 8.333333333333332%;
}
}
HTML
<div class="container">
<div class="row table-row">
<div class="col-sm-4 custom">
100% height to make equal to ->
</div>
<div class="col-sm-8 image-col">
<img src="http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1" class="img-fluid">
</div>
</div>
</div>
2.绝对bg div
演示:http://jsbin.com/aVEsUmig/2/edit
上面和下面的内容的演示:http://jsbin.com/aVEsUmig/3
.content {
text-align: center;
padding: 10px;
background: #ccc;
}
@media (min-width:768px) {
.my-row {
position: relative;
height: 100%;
border: 1px solid red;
overflow: hidden;
}
.img-fluid {
width: 100%
}
.row.my-row > [class*="col-"] {
position: relative
}
.background {
position: absolute;
padding-top: 200%;
left: 0;
top: 0;
width: 100%;
background: #ccc;
}
.content {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
padding: 10px;
}
}
HTML
<div class="container">
<div class="row my-row">
<div class="col-sm-6">
<div class="content">
This is inside a relative positioned z-index: 1 div
</div>
<div class="background"><!--empty bg-div--></div>
</div>
<div class="col-sm-6 image-col">
<img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1" class="img-fluid">
</div>
</div>
</div>
您需要设置您想要定义高度的每个父元素的高度。
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
- 这是否适用于 bootstrap 3，即 OP 所问的？ (4认同)
| 归档时间： |
|
| 查看次数： |
174496 次 |
| 最近记录： |