css - Div 高度百分比，父高度的一半

Question

我有两个并排显示的 div，左侧 div 是20%宽度，右侧是80%宽度。

现在左 div 包含水平调整大小的图像，因此它的高度是未知的并且不断变化。

现在，当这个 div 调整父级高度的大小增加或减少时，当发生这种情况时，我需要我的右 div 来调整大小，我该怎么做？

jsFiddle

Answer 1

您可以尝试属性table-cell上的 CSS3 值：http: //jsfiddle.net/UJYyw/5/display

和

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

你只需要table-cell在div.one和div.two

.one, .two{
    display:table-cell;
}

兼容的浏览器会以它们在标签上td的方式调整元素的高度。th

Answer 2

您可以使用 jQuery 来执行此操作。

$('.container').css({'height':$('.one').height()});​

在这里看到一个 jsFiddle

当您更改.onecss 中的值时，它会更新 的大小，因此也会.container更新.two。

Answer 3

这是只使用浮点数和几个包装器的跨浏览器解决方案http://jsfiddle.net/RSPbD/

HTML

<div class="container">
    <div class="wrap1">
        <div class="wrap2">
            <div class="one">text in div one</div>
            <div class="two">text in div two</div>
            <div class="clear"></div>
        </div>
    </div>
</div>​

CSS：

.container{
    border:1px solid;
    width:70%;
    margin:50px;
    padding:10px;
}

.wrap1 {
    width: 25%;
    background: red;
    position: relative;
    left: 7%;
}

.wrap2 {
    width: 200%;
    position: relative;
    left: 100%;
    margin:0 -200% 0 0;
    background: blue;
}

.one{
    float: left;
    width: 50%;
    margin-right: -100%;
    position: relative;
    left: -50%;
}

.two {
}

.clear {
    clear: both;
    font-size: 0;
    overflow: hidden;
}