设置相对于子高度的父高度。

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