子级div到父级自动高度的100％高度 [英] Child div 100% height to parent auto height

问题描述

我在这里是因为其他类似的问题也无法解决我的特定问题。

我需要 right div 始终保持100％的高度，其中父级的高度取决于 left div 的高度，这取决于内部内容。 / p>

以下是html：

 < div class = container clearfix> 
< div class = left>< / div> 
< div class = right>< / div> 
< / div> 
  

这是CSS：

  .container {
 min-height：10px; 
宽度：自动； 
高度：自动； 
 background-color：#eeeeee; 
} 
 
 .left {
位置：相对； 
浮动：左； 
最低高度：100像素； 
宽度：50像素； 
 background-color：#dddddd; 
} 
 
 .right {
最小高度：20px; 
职位：相对； 
浮动：左； 
身高：100％； 
宽度：50像素； 
 background-color：#dddddd; 
} 
 
。 
 
 .clearfix：
之后{
 content：。; 
显示：块； 
 clear：两者； 
可见性：隐藏； 
行高：0; 
高度：0； 
} 
 .clearfix {
 display：inline-block; 
} 
  

注：

我正在使用 clearfix 。

如果可以在 jsfiddle

中显示答案

这里是jsFiddle http://jsfiddle.net/C9Kmx/32/

解决方案

通过阅读您对其他解决方案的评论，我很清楚，唯一适合您的解决方案是在代码中实现一些JS。但是，这不是问题。

http：// jsfiddle .net / b7TuP /

Im here because other similar questions couldn't help my particular problem.

I need right div to be 100% height all the time, where the parent height depends on left div height which depends on content inside.

Here is the html:

<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>

​Here is 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

Here is jsFiddle http://jsfiddle.net/C9Kmx/32/

解决方案

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.

http://jsfiddle.net/b7TuP/

这篇关于子级div到父级自动高度的100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！