CODEWITHSUNDEEP
css
Bartosz Bialecki
Bartosz Bialecki

Reputation: 4451

CSS: div height take all available space of the parent

I have this:

<div id="main">
  <div id="header"></div>
  <div id="content"></div>
</div>

I want that content take all remaining space of the parent, but when I added height: 100% in css it takes exactly 100% of the parent height. How to set the height of the content div to height of the parent - height of the header?

Upvotes: 0

Views: 101

Answers (4)

shyammakwana.me
shyammakwana.me

Reputation: 5752

Display: flex is the property what you are looking for.

take a look at this

Working Demo

HTML

<div id="main">
  <div id="header">blah blah blah header </div>
    <div id="content"> content  content  content  content  content  content  content  cdfadfdasfafontent  content  content  content  content  content  content  content  content  content  content  content  content  content  cont fdsfasfadf adsf da fads fa fa ent <div> content  content  content  content  content  content  content  content  content  content  content  content  content  content  contenfafda fa fs ff   content  content  content </div> content  content  contencontent content t content content content content content  content  content  content  content  content  content  content  content </div>
</div>

CSS

html, body {
    height:300px;
}
#main  {
    height:390px;
    background: #999; 
    display:flex;
    flex-direction: column;
}
#header {
    background: #555;
}
#content {
    background: #000;
    color: #fff;
    display:flex; 
    flex: 1;
    flex-direction: column;
}

Upvotes: 2

Prashank
Prashank

Reputation: 796

As you said, the height is 30px so you can try this

#content {
    height: calc(100% - 30px);
}

EDIT: http://css-tricks.com/a-couple-of-use-cases-for-calc/ some info for those who don't know about calc

Upvotes: 4

Justinas
Justinas

Reputation: 43451

Option one, use position: absolute for header to pop it out:

#main{
    position: relative;
    height: 500px;
}

#header{
    position: absolute;
    top: 0;
    left: 0;
}

Option two, use css Calc():

#content{
    height: calc(100% - 30px);
}

Option three, use jQuery:

$('#content').css({
   height: ($('#main').height() - $('#header').height()) + 'px';
});

Upvotes: 2

Yuval
Yuval

Reputation: 15

You can do so the height will be same as your text

Upvotes: 0

Related Questions