Установите родительскую высоту относительно высоты ребенка.

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

Это должно помочь !!

EDIT

Предполагая, что вам контейнер закрыт неправильно, это должно быть вашей 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