子div 100％身高父母汽车高度

我在这里，因为其他类似的问题不能帮助我的特殊问题。子div 100％身高父母汽车高度

我需要right div始终为100％身高，其中parent身高取决于left div身高，这取决于里面的内容。

下面是HTML：

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

这里是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; 
}

注：
我使用clearfix。
如果你能表现出jsfiddle

你的答案这里是的jsfiddle http://jsfiddle.net/C9Kmx/32/

来源

2012-07-10 skmasq

通过其他的解决方案阅读您的意见很清楚，我只为你的解决方案是实现一些JS到你的代码。但这不是问题。

http://jsfiddle.net/b7TuP/

来源

2012-07-14 15:47:11 sed

，我只看到一个解决方案，它包含了js，所以基本上不可能用普通的css来完成。 – skmasq 2012-07-19 15:27:17

给position:fixed和height:100%为正确的股利。这将解决您的问题。

来源

2012-07-10 08:46:11 aneeshraj

你能告诉我的jsfiddle，因为我不明白为什么没有为我工作 – skmasq 2012-07-10 11:15:36

http://jsfiddle.net/aneeshrajvj/J8qTB/ – aneeshraj 2012-07-11 03:44:08

你可以看到它跨越了parrent div。这不是我想要的。我希望它在里面。 – skmasq 2012-07-14 15:28:18

做出正确的div position:absolute;并使父div position:relative;然后height:100%;将为正确的div工作。确保你也相应地调整它的x位置和宽度。在这个例子中，我给了它一个left:50px以确保它出现在左列的右侧。

的jsfiddlehttp://jsfiddle.net/e9mvD/

来源

2012-07-10 08:46:37 tb11

我不能给它左：50px，因为with会是相对的 – skmasq 2012-07-10 09:59:21

在这种情况下，你可以在容器div上设置一个固定的宽度，然后在绝对位置的右分区上使用'right：0'， div也是一个宽度。 – tb11 2012-07-10 18:30:10

这个解决方案对我来说最合适。因为它不会对左侧和右侧元素施加任何其他限制，所以此选项必须包含javascript – Kiee 2014-01-07 17:31:32

可以使用display属性的table-cell值在此布局并删除float是这样的：通过给

.left, .right{ 
    display:table-cell; 
}

现场演示http://jsfiddle.net/C9Kmx/34/

来源

2012-07-10 08:48:09

+1这是最佳解决方案。 – techfoobar 2012-07-10 08:56:16

此属性使用最低高度，基本上如果我使用100％高度没有“正确”它只是崩溃。 – skmasq 2012-07-10 11:17:06

这是一个很好的解决方案。谢谢 – 2015-12-11 18:40:11

尝试容器高度固定值

这也将解决这个问题。只是试图在的jsfiddle

http://jsfiddle.net/C9Kmx/35/

.container 
{ 
    min-height: 10px; 
    width: auto; 
    height: 100px; 
    background-color: #eeeeee; 
}

来源

2012-07-10 08:55:42 Narendra

如前所述，目前我无法修复 – skmasq 2012-07-10 10:01:14

你可以做到这一点使用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>

来源

2016-12-28 22:38:52 Spencer

我同意，但由于IE11仍然支持，它与Chrome和Firefox如何实现flexbox有一些严重的不一致。作为flexbox的点有其局限性，直到IE11被丢弃。 – skmasq 2017-01-13 11:05:04

子div 100％身高父母汽车高度

回答

相关问题