html - 如果未定义容器高度，如何使用 height:50%？

Question

我想使用 height:50%，但是没有定义容器的高度，正确的解决方案是什么？

<div id="container">
    <div id="left-50">
        <div id="left-50-1">1</div>
        <div id="left-50-2">2</div>
    </div>
    <div id="image">
        <img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg">
    </div>
</div>

#container {
    overflow:hidden;
}

#left-50 {
    float:left;
}

#left-50-1 {
    height:50%;
    width:50px;
    background:yellow;
}

#left-50-2 {
    height:50%;
    width:50px;
    background:purple;
}

#image {
    float:left;
}

jsfiddle 网址：http: //jsfiddle.net/XqMDF/

Answer 1

正确的解决方案是定义容器高度。或引用主体或其他定义的元素。

使容器display:inline-block;调整到图像高度...或定义固定高度。

演示：http://jsfiddle.net/XqMDF/2/

Answer 2

要点是：添加position: relative;到#container, 和position: absolute;元素height: 50%;。此外，适用display: block;于图像。然后在 上添加左边距#image。该边距的值是元素的宽度height: 50%;（在您的示例中为 50px）。

这是包含所有属性的演示。

http://jsfiddle.net/XqMDF/1/