Html 子 div 100% 高度到父自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11409586/
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
Child div 100% height to parent auto height
提问by skmasq
Im here because other similar questions couldn't help my particular problem.
我在这里是因为其他类似的问题无法帮助我解决特定问题。
I need right divto be 100% height all the time, where the parentheight depends on left divheight which depends on content inside.
我需要right div一直保持 100% 的高度，其中parent高度取决于left div高度，而高度取决于里面的内容。
Here is the html:
这是html：
<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
?Here is CSS:
？这里是CSS：
.container{
min-height: 10px;
width: auto;
height: auto;
background-color: #eeeeee;
}
.left{
position: relative;
float: left;
min-height: 100px;
width: 50px;
background-color: #dddddd;
}
.right{
min-height: 20px;
position: relative;
float: left;
height: 100%;
width: 50px;
background-color: #dddddd;
}
.
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
?Note:
I'm using clearfix.
And if you can show your answer in jsfiddle
?注：
我正在使用clearfix.
如果你可以显示你的答案jsfiddle
Here is jsFiddle http://jsfiddle.net/C9Kmx/32/
这是 jsFiddle http://jsfiddle.net/C9Kmx/32/
采纳答案by Stan
By reading your comments on other solutions it is clear to me that only solution for you is to implement some JS into your code. This is not a problem, however.
通过阅读您对其他解决方案的评论，我很清楚唯一的解决方案是在您的代码中实现一些 JS。然而，这不是问题。
回答by tb11
Make the right div position:absolute;and make the parent div position:relative;and then height:100%;will work for the right div. Make sure you also adjust its x-position and width accordingly. In this example I gave it a left:50pxto make sure it appears to the right of the left column.
制作正确的 divposition:absolute;并制作父 div position:relative;，然后height:100%;将适用于正确的 div。确保您还相应地调整其 x 位置和宽度。在这个例子中，我给了它 aleft:50px以确保它出现在左列的右侧。
JSFiddlehttp://jsfiddle.net/e9mvD/
JSFiddle http://jsfiddle.net/e9mvD/
回答by Rohit Azad
You can use the table-cellvalue of the displayproperty in this layout and remove the floatlike this:
您可以在此布局中使用该属性的table-cell值display并删除float如下内容：
.left, .right{
display:table-cell;
}
live demo http://jsfiddle.net/C9Kmx/34/
回答by Spencer
You can accomplish this using flexbox and some creativity.
您可以使用 flexbox 和一些创造力来实现这一点。
.container {
display: flex;
background: black;
padding: 5px;
width: 300px
}
.left {
height: 200px;
flex: 1 0 0px;
background: blue;
}
.right {
flex: 1 0 0px;
overflow: auto;
background: green;
}
.column {
display: flex;
flex-direction: column;
width: 20%;
}<div class="container">
<div class="left"></div>
<div class="column">
<div class="right"></div>
</div>
</div>回答by aneeshraj
Give position:fixedand height:100%for the right div. This will solve your issue.
给position:fixed和height:100%正确的div。这将解决您的问题。
回答by Narendra
Try by giving the height of container a fixed value
尝试给容器的高度一个固定值
this will also fix the issue. Just tried it in jsFiddle
这也将解决这个问题。刚刚在 jsFiddle 中尝试过
.container
{
min-height: 10px;
width: auto;
height: 100px;
background-color: #eeeeee;
}
