CSS Bootstrap 3 - 列内自定义 div 的 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20773342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - 100% height of custom div inside column
提问by Seong Lee
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.
一个包含class="img-responsive"用于流体图像的图像，旁边的另一列有一个自定义 div 块。
My question is how to get this custom div's height 100%. Below didn't work for me.
我的问题是如何让这个自定义 div 的高度达到 100%。下面对我不起作用。
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).
但我的情况略有不同，我需要在列内使用自定义 div 设置与图像高度相等的高度，而不是父 div（列）。
Here is JS Fiddle
这是JS小提琴
采纳答案by Christina
The original question is about Bootstrap 3 and that supports IE8 and 9 so Flexbox would be the best option but it's not part of my answer due the lack of support, see http://caniuse.com/#feat=flexboxand toggle the IE box. Pretty bad, eh?
最初的问题是关于 Bootstrap 3 并且支持 IE8 和 9，所以 Flexbox 将是最好的选择，但由于缺乏支持，它不是我的答案的一部分，请参阅http://caniuse.com/#feat=flexbox并切换 IE盒子。很糟糕吧？
2 ways:
2种方式：
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.
1. Display-table：你可以把行变成 display:table 和 col- 变成 display:table-cell。它可以工作，但表的局限性是存在的，其中包括推拉和偏移不起作用。另外，我不知道你在哪里使用它——在什么断点处。您应该使图像全宽并将其包裹在另一个容器中以将填充放在那里。此外，您需要弄清楚移动设备上的设计，这是针对 768 像素及以上的。当我使用它时，我会重新声明尺寸，有时我会在它们上面贴上重要的东西，因为表格占据了它们内部内容的宽度，所以再次声明宽度有助于这一点。你需要四处玩耍。我也使用脚本，但您必须更改较少的文件才能使用它，否则它将无法响应。
DEMO: http://jsbin.com/EtUBujI/2
演示：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
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
2.绝对bg div
DEMO: http://jsbin.com/aVEsUmig/2/edit
演示：http: //jsbin.com/aVEsUmig/2/edit
DEMO with content above and below: http://jsbin.com/aVEsUmig/3
带有上下内容的演示：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
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>
回答by Yousef Altaf
I was just looking for a smiliar issue and I found this:
我只是在寻找一个类似的问题，我发现了这个：
.div{
height : 100vh;
}
more info
更多信息
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
回答by dima_horror
You need to set the height of every parent element of the one you want the height defined.
您需要设置要定义高度的每个父元素的高度。
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
回答by pasx
My solution was to make all the parents 100% and set a specific percentage for each row:
我的解决方案是让所有的父母 100% 并为每一行设置一个特定的百分比：
html, body,div[class^="container"] ,.column {
height: 100%;
}
.row0 {height: 10%;}
.row1 {height: 40%;}
.row2 {height: 50%;}
