Bootstrap 3 - 自定义div在列的100％的高度 [英] Bootstrap 3 - 100% height of custom div inside column
问题描述
假设我有两行。
一个包含使用 class =img-responsive为流体图像，其他列旁边有一个自定义div块。
我的问题是如何获得这个自定义div的高度100％。以下对我无效。
height：auto;
max-width：100％;
如果我在高度设置固定值，它不会很好地与
列
我可以通过像以前的问题所建议的那样执行类似的操作来获得列的高度相等。
class * =col - ] {
margin-bottom：-99999px;
padding-bottom：99999px;
}
.row {
overflow：hidden;
}
但我的情况略有不同，我需要使用自定义div
设置与图像高度相等的高度，而不是父divs（列）。
以下是
.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 {
宽度：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等于 - >
< / div>
< div class =col-sm-8 image-col>
< img src =http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1class =img-fluid>
< / div>
< / div>
< / div>
2。 Absolute bg div
演示： http://jsbin.com/aVEsUmig/ 2 /编辑
DEMO，其内容高于或低于： 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>
这是一个相对定位的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+1class =img-fluid>
< / div>
< / div>
< / div>
Let's say I have two columns in a row.
One contains an image using class="img-responsive" for fluid image and the other column next to has a custom div block.
My question is how to get this custom div's height 100%. Below didn't work for me.
height: auto;
max-width: 100%;
If I set fixed value in height, it won't play nicely with the column containing image as the image resizes height when the viewport size changes.
I can get the columns heights equal by doing something like the following as suggested by previous questions.
class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
But my case is slightly different that I need to use custom div inside the column that sets equal height with the image height, not the parent divs (columns).
Here is JS Fiddle
2 ways:
1. Display-table: You can muck around with turning the row into a display:table and the col- into display:table-cell. It works buuuut the limitations of tables are there, among those limitations are the push and pull and offsets won't work. Plus, I don't know where you're using this -- at what breakpoint. You should make the image full width and wrap it inside another container to put the padding on there. Also, you need to figure out the design on mobile, this is for 768px and up. When I use this, I redeclare the sizes and sometimes I stick importants on them because tables take on the width of the content inside them so having the widths declared again helps this. You will need to play around. I also use a script but you have to change the less files to use it or it won't work responsively.
DEMO: 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. Absolute bg div
DEMO: http://jsbin.com/aVEsUmig/2/edit
DEMO with content above and below: 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>
这篇关于Bootstrap 3 - 自定义div在列的100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
