How to use max height and height if you have two divs

Question

I have the following DOM:

<div id="parent" style="height: 200px;">
  <div id="header" style="height: 40px;"></div>
  <div id="content" style="max-height: 100%; overflow-y: auto"></div>
</div>

This leads to content having a height of 200px although I want it to be 160px. Basically the parent div is of variable height and I want the content div to have the height based on it. The header height is fixed.

I cannot use js to solve this, as the actual dom is very convoluted and using JS for it would just make it further complex.

Since you are defining all of the heights in pixels, why don't you just apply `max-height: 160px` on `#content`? There's no reason why `max-height: 100%` would limit the height of that div to 160px. — Kyle O, Dec 03 '15 at 10:49
The parent height is variable. And is not actually 200px. It varies based on the window size. I checked similar questions, and it seems I would have to implement flex here. — Kyuubi, Dec 03 '15 at 10:50
http://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent — Lalji Tadhani, Dec 03 '15 at 10:50
I am aware of that question. Thanks to it I was able to reach till here. — Kyuubi, Dec 03 '15 at 10:51

score 1 · Answer 1 · answered Dec 03 '15 at 10:50

Pulling the header out of the main flow works?

<div id="parent" style="height: 200px;position:relative;">
  <div id="header" style="height: 40px;position:absolute; top:0;"></div>
  <div id="content" style="padding-top:40px;max-height: 100%; overflow-y: auto"></div>
</div>

score 1 · Accepted Answer · answered Dec 03 '15 at 10:52

1

Flexbox can do that.

#parent {
  height: 200px;
  display: flex;
  flex-direction: column
}
#header {
  flex: 0 0 40px;
  background: red;
}
#content {
  flex: 1;
  background: green;
}

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

answered Dec 03 '15 at 10:52

Paulie_D

107,962
13
142
161

Just in case, need to add overflow-y: auto to the content. – Kyuubi Dec 03 '15 at 11:16

Danield · Answer 3 · 2015-12-03T11:01:25.347

1

One way to do this is with calc()

#content {
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background:tomato
}

FIDDLE

Alternatively, you could make use of box-sizing to do this:

#content {
  padding-top:40px;
  margin-top:-40px;
  position: relative;
  z-index:-1;
  box-sizing: border-box;
  max-height: 100%;
}

FIDDLE

edited Dec 03 '15 at 11:01

answered Dec 03 '15 at 10:55

Danield

121,619
37
226
255

score 1 · Answer 4 · answered Dec 03 '15 at 10:55

1

How about using calc()?

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

Fiddle - http://jsfiddle.net/upemxmmf/

answered Dec 03 '15 at 10:55

Edward

5,148
2
29
42

score 0 · Answer 5 · answered Dec 03 '15 at 10:57

html

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

css

#parent {
  background: teal;
  height: 200px;
}

#header {
  background: coral;
  height: 40px;
}

#content {
  background: #eee;
  max-height: calc(100% - 40px); /* 100% - height of header */
  overflow-y: auto
}

DEMO

About calc() and calc() support

How to use max height and height if you have two divs

5 Answers5

FIDDLE

FIDDLE