Два DIV внутри DIV. Как автоматически заполнить пространство родительского DIV вторым DIV?

Пожалуйста, посетите эту скрипку, чтобы понять, что я имею в виду -

У меня есть родительский DIV, внутри которого есть два DIV, расположенных в вертикальном порядке. Верхний DIV должен иметь только высоту своего содержимого, тогда как нижний DIV должен занимать все оставшееся пространство родительского DIV независимо от высоты содержимого, а также не должен перекрывать родительский DIV.

HTML:

<div class="outer">
    <div  class="inner-title">
        THIS IS MY TITLE
    </div>
    <div class="inner-content">
        CONTENT AREA
    </div>
</div>

CSS:

html,body
{
height: 100%;
}

.outer
{
    background-color:blue;
    height: 80%;
}

.inner-title
{
    background-color:red;
}

.inner-content
{
background-color:yellow;
    height: auto;
}

Короче говоря, «внутреннее содержимое» должно занимать все оставшееся пространство «внешнего» DIV, не перекрывая друг друга.

Любая идея о том, как этого добиться?

Любая помощь в этом очень ценится.


html css autofill height
person Nirman    schedule 11.07.2013    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Добавьте display:table; к родительскому div и display:table-row; к дочерним div

И height:0 к первому дочернему div. Это занимает автоматическую высоту

    html,body{
    height: 100%;
}
.outer{
    background-color:blue;
    height: 80%; border:red solid 2px;
    display: table;
     width:100%
}
.inner-title{
    background-color:red;
    display:table-row; 
     width:100%
}
.inner-content{
    background-color:grey;
    display:table-row;
    width:100%;
    height:100%
}

ОБНОВЛЕНО ДЕМО

person Sowmya    schedule 11.07.2013
comment
@sowmya.. Как насчет установки минимальной высоты для 2-го div?? - person Guruprasad J Rao; 11.07.2013
comment
Вам нужна минимальная высота. Op ожидает, что div займет все доступное пространство - person Sowmya; 11.07.2013
comment
@Sowmya.. Нет.. Нет.. У меня были сомнения, и я спросил.. установить минимальную высоту для оставшейся части.. возможно ли это ?? - person Guruprasad J Rao; 11.07.2013
comment
Это не очень хорошо в его вопросе, потому что высота первого div не фиксирована, поэтому - person Sowmya; 11.07.2013
comment
@Sowmya.. Что ж, это было полезно.. :) Спасибо.. :) - person Guruprasad J Rao; 11.07.2013
comment
это выглядит хорошим трюком ... но одна вещь заключается в том, что высота первого DIV должна соответствовать размеру его содержимого, а второй DIV должен занимать оставшееся пространство в родительском DIV. Здесь кажется, что первый DIV также занимает гораздо больше места (высоты), чем его содержимое. - person Nirman; 11.07.2013
comment
@Nirman, потому что я добавил больше контента в первый div, чтобы показать образец. Проверьте обновленный ответ сейчас - person Sowmya; 11.07.2013
comment
спасибо Sowmya... только что проверил, это хорошо выглядит в IE10 и Chrome.. но в Firefox отображаются две строки одинаковой высоты.. - person Nirman; 11.07.2013
comment
Я полагаю, display:table и display:table-row отображаются по-разному в Chrome и Firefox! - person Nirman; 11.07.2013
comment
спасибо, это сработало для меня .. ваши быстрые ответы очень помогли мне решить это в разумные сроки. - person Nirman; 11.07.2013
comment
@Sowmya: есть ли лучшее решение на основе flexbox? Или display:table по-прежнему единственный способ сделать это? - person D.R.; 12.10.2016
comment
@CarlosGaleano рад, что это помогло - person Sowmya; 30.06.2017

arrow_upward
10
arrow_downward

Более новым способом CSS будет использование flexbox.

/*QuickReset*/ *{box-sizing:border-box;margin:0;} html,body{height:100%;}

.flex-col {
  display: flex;
  flex-direction: column; /* or:   flex-flow: column wrap; */
  height: 100%;
}

.flex-fill { /* Add this class to the element you want to expand */
  flex: 1;  
}
<div class="flex-col">
    <div style="background:red;"> HEADER </div>
    <div class="flex-fill" style="background:yellow;"> CONTENT </div>
    <div style="background:red;"> FOOTER</div>
</div>

person Roko C. Buljan    schedule 16.12.2016
comment
лучшее решение, чем предыдущее, имхо - person Si7ius; 11.10.2018