Два div, которые соответствуют высоте контента

Question

У меня есть div (.main-div), который содержит два внутренних div (.title-div и .body-div). Они должны поместиться в обоих направлениях размером .main-div.

.title-div имеет фиксированную высоту 25px.

Иногда .title-div может быть скрыт. Но когда я делаю это, мой .body-div поднимается, но не подходит .main-div, потому что его свойство высоты ошибочно.

Я хотел бы мой .body-div всегда надевайте доступное пространство своего родителя

.main-div { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: lightgray; 
 
    border: 1px solid black; 
 
} 
 
.title-div { 
 
    height: 25px; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
} 
 
.body-div { 
 
    height: calc(100% - 25px); 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 
/* from bootstrap*/ 
 

 
.hidden { 
 
    display: none !important; 
 
    visibility: hidden !important; 
 
}

<div class="main-div"> 
 
    <div class="title-div"> 
 
    title 
 
    </div> 
 
    <div class="body-div"> 
 
    body 
 
    </div> 
 
</div>

Вот скрипку: https://jsfiddle.net/g8zef0ux/

Любые идеи?

Answer 1

Есть несколько вещей, которые вы можете сделать. Вот два возможных решения.

В моем первом примере, в то же время, вы скрываете заголовок, мы добавляем дополнительный класс в тело, чтобы он был выше. Он перезаписывает ваш calc и устанавливает высоту до 100%.

Во втором примере мы используем модуль CSS3 Flexbox, чтобы заставить тело расти, чтобы заполнить все свободное пространство. Когда заголовок там, он настроен не расти, а не сокращаться, и оставаться на 25 пикселей, а тело заполняет остальные. Когда название уходит, тело заполняет все свободное пространство.

$(".btn1").click(function() { 
 
\t $(".title-div1").toggleClass("hidden"); 
 
    $(".body-div1").toggleClass("body-div-noTitle"); 
 
}); 
 

 
$(".btn2").click(function() { 
 
\t $(".title-div2").toggleClass("hidden"); 
 
});

.main-div1 { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: lightgray; 
 
    border: 1px solid black; 
 
} 
 

 
.title-div1 { 
 
    height: 25px; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
} 
 

 
.body-div1 { 
 
    height: calc(100% - 25px); 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 

 
.body-div-noTitle { 
 
    height:100%; 
 
} 
 

 
.main-div2 { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: lightgray; 
 
    border: 1px solid black; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 

 
.title-div2 { 
 
    flex: 0 0 25px; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
} 
 

 
.body-div2 { 
 
    flex:1; 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 

 
/* from bootstrap*/ 
 
.hidden { 
 
    display: none !important; 
 
    visibility: hidden !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-div main-div1"> 
 
    <div class="title-div title-div1"> 
 
    title 
 
    </div> 
 
    <div class="body-div body-div1"> 
 
    body 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<input class="btn1" type="button" value="Toggle title visibility" /> 
 

 
<div class="main-div main-div2"> 
 
    <div class="title-div title-div2"> 
 
    title 
 
    </div> 
 
    <div class="body-div body-div2"> 
 
    body 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<input class="btn2" type="button" value="Toggle title visibility" />

Answer 2

Вы можете легко достигнуть этого с Flexbox. https://jsfiddle.net/g8zef0ux/2/

.main-div { 
    height: 150px; 
    width: 150px; 
    display: flex; 
    flex-direction: column; 
    background-color: lightgray; 
    border: 1px solid black; 
} 

.title-div { 
    flex: 0 0 25px; 
    width: 100%; 
    background-color: lightblue; 
} 

.body-div { 
    flex: 1; 
    width: 100%; 
    background-color: green; 
} 

Answer 3

Из того, что я думаю, что вы спрашиваете, вот решение:

https://jsfiddle.net/g8zef0ux/

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

if (!$(".title-div").hasClass('hidden')) { 
    $(".body-div").css('height', '100%').css('height', '-=25px'); 
    }else{ 
    $(".body-div").css('height', '100%'); 
    } 

Если верно, отрегулируйте высоту соответственно.