Two div that fit the content height

Question

I have a div (.main-div) that contains two inner div (.title-div and .body-div). They must fit in both direction the size of .main-div.

.title-div has a fixed height of 25px.

Sometimes .title-div can be hidden. But when I do that my .body-div goes up but doesn't fit .main-div because its height property is wrong.

I would like my .body-div always fit the available space of its parent

.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>

Here is a fiddle: https://jsfiddle.net/g8zef0ux/

Any ideas?

try flex-box, this has been explained over and over already. — Randy, Mar 18 '16 at 13:45
Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Randy, Mar 18 '16 at 13:47
I have added a solution to you problem so one button can toggle the title and the height of body updates correctly — Deckerz, Mar 18 '16 at 13:54

score 0 · Accepted Answer · answered Mar 18 '16 at 13:46

There are a couple of things you can do. Here are two possible solutions.

In my first example, at the same time you're hiding the title, we're adding an additional class to the body so that it's taller. It overwrites your calc, and sets the height to 100%.

In the second example, we use the CSS3 Flexbox module to cause the body to grow to fill all available space. When the title is there, it's set to not grow, not shrink, and stay at 25px, and the body fills the rest. When the title is gone, the body fills the whole space available.

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

$(".btn2").click(function() {
 $(".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" />

score 0 · Answer 2 · answered Mar 18 '16 at 13:46

You could easily achieve this with 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;
}

score 0 · Answer 3 · answered Mar 18 '16 at 13:53

From what i think you are asking here is the solution:

https://jsfiddle.net/g8zef0ux/

I added a check to see if it contained the hidden class by doing so:

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

If true adjust the height accordingly.

Two div that fit the content height

3 Answers3