Parent div with height: 100% doesn't work

Question

Possible Duplicate:
CSS - 100% height doesn’t work

I have 3 divs, the div-1 is a background and div-2 and div-3 are two containers (one for text and one for photo).

#div-1 {
  width: 100%;
  height: 100%;
  padding: 40px 0;
  margin: 0;
}

#div-2 {
  width: 500px;
  margin: 0;
  float: left;
}

#div-3 {
  width: 200px;
  margin: 0;
  float: right;
}

<div id="div-1">
  <div id="div-2"></div>
  <div id="div-3"></div>
</div>

This is what I get:

enter image description here

Why height: 100% doesn't work?

try this: `html,body{height:100%;}` The height of these elements is automatic. — Shmiddty, Oct 15 '12 at 14:41
This worked for me. Looking at the standard default css rules, I see no reason for these elements to have auto height. Oh, I guess because html has no parent its 100% height is zero? Strange. — David Spector, Aug 29 '19 at 15:22

score 4 · Accepted Answer · answered Oct 15 '12 at 14:42

4

This can work

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>

answered Oct 15 '12 at 14:42

Ives.me

2,359
18
24

3

Unnecessary complexity. – David Spector Aug 29 '19 at 15:23

score 4 · Answer 2 · answered Oct 15 '12 at 14:42

4

The height of #div-1 is 100% but 100% of nothing, as it relies on the parent tags height I believe. Try setting your body to 100% height in css.

answered Oct 15 '12 at 14:42

Simon Carlson

1,919
5
24
35

2

That doesn't work: https://jsfiddle.net/qecd1r3y/ 100vh does. – Nateowami Mar 26 '19 at 03:36

score 4 · Answer 3 · edited Sep 21 '17 at 23:08

4

Remove height: 100%; in #div-1 and add position: absolute;. It will work just fine.

edited Sep 21 '17 at 23:08

Matheus Avellar

1,507
1
22
29

answered Oct 15 '12 at 14:50

Web Designer cum Promoter

1,334
14
26

score 3 · Answer 4 · answered Oct 15 '12 at 14:40

3

you need to add clear flow after you applying floating properties to elements, more about it here: http://www.quirksmode.org/css/clearing.html

answered Oct 15 '12 at 14:40

Roman

504
4
10

Parent div with height: 100% doesn't work

4 Answers4

Linked