html - 设置父项高度相对于子项高度。

Question

在下面的代码中，B1 包含一个图像，B2 包含一个 iframe。

B 和 container 的高度等于 B1 的高度，但是 B2 溢出了容器，我不想要。我该如何解决这个问题？

<div id="container">
    </div>
    <div id="B">
        <div id="B1">
             <img src="example.jpg" />
        </div>
        <div id="B2">
             <iframe src="example.htm">
                   Your browser doesn't support iframes.
             </iframe>
        </div>
    </div>
</div>

Answer 1

给 container 值 display:inline-block

和B2，overflow:auto

这应该有帮助!!

编辑

假设您的容器未正确关闭，这应该是您的 html 标记:

<div id="container">
    <div id="B">
        <div id="B1">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </div>
        <div id="B2">
            <iframe src=""></iframe>
        </div>
    </div>
</div>

和CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#container {
    width:100%;
    height:100%;
}
#B {
    width:100%;
    height:100%;
}

#B1,#B2,iframe,img{
    width:100%;
    height:auto; /*to mainatin height as per requirement */
}

basic demo