Установите высоту div

Question

Я хочу установить высоту раздела на основе дочерних элементов, но, к сожалению, я не знаю, что не так с моим кодом. Когда я пытаюсь уменьшить размер экрана, содержимое в абзаце и img переполняется.

HTML

<div id="section2" class="about"> 
     <div class="container-section"> 
     <div class="about-content col-lg-6"> 
      <p></p> 
     </div> 
     <div class="about-pic col-lg-2"> 
      <img /> 
     </div> 
     </div> 
</div> 

CSS

.about{ 
height: auto; 
margin: 0; 
} 
.about .container-section{ 
padding: 0; 
height: auto; 
position: relative; 
} 
.about .container-section .about-content p{ 
padding-bottom: 15px; 
font-family: 'Lato', sans-serif; 
text-align: justify; 
} 
.about .container-section .about-pic img{ 
height: auto; 
width: 100%; 
padding-bottom: 25%; 
} 

Любые предложения?

Answer 1

Хорошо, похоже, вы используете Bootstrap, верно? И Bootstrap добавляет некоторые поплавки, которые удаляют элементы из потока страниц, и, таким образом, контейнер ведет себя так, как если бы эти элементы не были в нем. Попробуйте добавить очищенный DIV в разных местах и ​​посмотреть, если это решает проблему, так как:

<div id="section2" class="about"> 
    <div class="container-section"> 
    <div class="about-content col-lg-6"> 
     <p></p> 
    </div> 
    <div class="about-pic col-lg-2"> 
     <img /> 
    </div> 
    </div> 
    <div style="clear:both;"></div> 
</div>