Автоматическая установка высоты DIV без JQuery

Question

У меня есть два элемента div. Второй - внутри первого элемента. Во втором я покажу текст. Для второго div я установил высоту для авто, и когда я поместил больше текста в div, высота больше. Также я установил высоту для первого div авто, но первый div всегда имел такую ​​же высоту.

Как установить высоту DIV, чтобы быть уверенным в количестве строк текста?

<div class="first-div"> 
    <div class="second-div"> 
    </div> 
</div> 

.first-div { 
    background-color: #f5f5f5; 
    margin-top: 5px; 
    margin-left: 5px; 
    margin-right: 5px; 
    border-radius: 6px; 
    border: 1px solid #b8b8b8; 
    text-align: justify; 
    padding: 4px 4px 4px 4px; 
    word-wrap: break-word; 
    height: auto; 
    min-height: 75px; 
} 
.second-div { 
    width: 30%; 
    float: right; 
    font-size: 9px; 
    height: auto; 
} 

Answer 1

Добавить overflow:hidden в .first-div.

Вы можете проверить этот вопрос: How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

Answer 2

Вы можете удалить min-height из ваших .first-div и применять overflow: hidden чек на скрипке, я думаю, что это то, что вы хотите.

В .second-div вы можете изменить высоту с помощью min-height. В скрипке у меня это на 300 пикселей.

http://jsfiddle.net/wcnbq9xc/

Answer 3

Demo 1

добавить overflow: auto к внешнему DIV (.first-DIV)

CSS

.first-div { 
    background-color: #f5f5f5; 
    margin-top: 5px; 
    margin-left: 5px; 
    margin-right: 5px; 
    border-radius: 6px; 
    border: 1px solid #b8b8b8; 
    text-align: justify; 
    padding: 4px 4px 4px 4px; 
    word-wrap: break-word; 
    height: 100%; 
    min-height: 75px; 
    overflow:auto; /* added */ 
} 
.second-div { 
    width: 30%; 
    float: right; 
    font-size: 9px; 
    height: auto; 
} 

Demo 2

или вы можете добавить DIV в HTML и установить его стиль как clear: both

CSS

.clear { 
    clear: both; 
} 

HTML

<div class="first-div"> 
    <div class="second-div"></div> 
    <div class="clear"></div> 
</div>