CSS: div height toma todo el espacio disponible del padre

Tengo esto:

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

preguntado el 28 de mayo de 14 a las 14:05

You have a fixed height for #header ? -

You can do height:inherit -

yes the header has fixed height set to 30 px -

mira esto y aquí es un violín, is this what you are looking for ? -

@TechnoKnol, yes but flex is quite new and probably not supported in every browser. -

4 Respuestas

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

contestado el 28 de mayo de 14 a las 14:05

Opción uno, usa 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';
});

contestado el 28 de mayo de 14 a las 14:05

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

mira esto

Demo de trabajo

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>

CO

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;
}

Respondido el 20 de junio de 20 a las 10:06

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

contestado el 28 de mayo de 14 a las 14:05

the main div has fixed size, but the user can resize it, so the content should fill all height of the main div - height if the header. - Bartosz Bialecki

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.