Блог

Главная - Вопросы по программированию - Высота, использующая 100 % родительского Div

Высота, использующая 100 % родительского Div

#html #css

#HTML #css — файл #css

Вопрос:

 <div class="img-blocks">
  <div class="img-blocks-header"></div>
  <div class="img-blocks-images"></div>
</div>

CSS — файл 

 .img-blocks{
    width:984px ;
    height:265px;
    margin: 0 auto;
    background: white;
    border-radius:7px ;
    margin-bottom: 15px;
}
.img-blocks-header{
    width:100% ;
    height: 33px;
    background: #c8c2c2;
    border-radius:7px 7px 0px 0px;
    text-align: center;
    color: white;
}
.img-blocks-images{
    width:100%;
    height:100%;
    padding:10px 0px 10px 0px;
    border:1px dotted black;


}

Я хочу, чтобы div с классом .img-blocks-images использовалось 100% доступной высоты, т. Е. После вычета высоты .img-block-header из родительского.
Не хочу использовать 100% высоту его родительского div .img-blocks .

Комментарии:

1. если ваш рост фиксирован, почему бы не использовать height: (265-33)px ?

2. height: calc(100% - 33px);

3. @abhitalks к сожалению, сейчас для этого недостаточно поддержки

4. Если ваша обертка DIV .img-blocks почему бы вам не установить, чтобы она имела процентную высоту и ширину, и оттуда вы можете установить процентную высоту и ширину для внутренних разделов, и они получат этот процент из этой обертки?

5. @vlrprbttst если мы исключим IE<9 и Safari<5.1 это хорошо поддерживается (с использованием префиксов поставщика)

Ответ №1:

Вы можете добавить height:100% к .img-blocks-images тому, что у вас уже есть. Но это приведет к переполнению родительского div. Так что добавьте overflow:hidden в родительский div.

Это будет работать, даже если высоты изменяются динамически

Вот скрипка

ДЕМОНСТРАЦИЯ

Ответ №2:

Если .img-blocks-header имеет фиксированную высоту, вы можете расположить ее по абсолютной величине и дать .img-blocks-images верхнее заполнение 33 пикселей (высота заголовка) плюс предполагаемое заполнение (10 пикселей) -> 43 пикселей. Таким образом, .img-blocks-images высота 100% всегда будет соответствовать родительскому.

Демонстрационная скрипка:

http://jsfiddle.net/Lv6hF/