Css height in percent not working

Question

I have the following simple code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Live Feed</title>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
    I should be tall
  </div>
</body>

</html>

But the div doesn't get displayed with height being 100%. Why?

For an element to have a relative height it has to have a parent element with a specified size, for it's own size to be relative *to*. If you add `height: 500px;` (or whatever) to the `body` element it should work. — David Thomas, Nov 24 '11 at 22:00
Here's a simple and clear explanation of the CSS `height` property with percentage values: http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Aug 25 '15 at 21:33

score 199 · Accepted Answer · edited Jan 22 '16 at 11:08

199

You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }

<html><body><div></div></body></html>

edited Jan 22 '16 at 11:08

PiTheNumber

22,828
17
107
180

answered Nov 24 '11 at 22:00

Jan Dragsbaek

8,078
2
26
46

14

The fiddle worked because it sets both html and body to 100% height. – Ed Bayiates Jul 12 '13 at 02:01
and what about the width? we dont have to specify the parent's width? @EdBayiates – StealthTrails Oct 03 '15 at 21:42
@Adamnick, the question was only about the height. The width does not affect the height. – Ed Bayiates Oct 03 '15 at 22:07
3

hi, thanks this works. can you explain why it is necessary to set the parent heights to 100%? – Jona Mar 07 '16 at 16:17

mb21 · Answer 2 · 2023-04-07T12:31:23.807

98

Make it 100% of the viewport height:

div {
  height: 100vh;
}

Works in all modern browsers and IE>=9, see here for more info.

On some mobile browsers like Safari, the address bar will show/hide on scroll. To take this into account, use one of svh, lvh or dvh (check browser support).

edited Apr 07 '23 at 12:31

answered Jun 11 '14 at 13:36

mb21

34,845
8
116
142

11

Be aware that it may not work as expected on mobile where 100vh doesn't take some UI elements of the browser into account. This is especially annoying when you put something at the bottom of 100vh tall element. – konrad May 23 '19 at 10:17

score 29 · Answer 3 · answered Nov 24 '11 at 22:01

29

height: 100% works if you give a fixed size to the parent element.

answered Nov 24 '11 at 22:01

GG.

21,083
14
84
130

score 17 · Answer 4 · edited Sep 15 '13 at 18:03

17

You can achieve that by using positioning.

Try

position: absolute;

to get the 100% height.

edited Sep 15 '13 at 18:03

laalto

150,114
66
286
303

answered Sep 15 '13 at 17:46

Muthu

179
1
2

This worked for me – Norbert Oct 09 '20 at 17:37

score 6 · Answer 5 · answered May 15 '14 at 09:55

6

You need to set 100% height on the parent element.

answered May 15 '14 at 09:55

rahul

61
1
1

score 4 · Answer 6 · answered Apr 24 '13 at 14:06

4

Add height:100% to body

body{height:100%}

answered Apr 24 '13 at 14:06

Pramod Bhoi

197
1
7

3

This did not work unless I also gave the 100% size to the HTML as @Jan shows. – Ed Bayiates Jul 12 '13 at 02:01

score 3 · Answer 7 · edited Dec 13 '19 at 12:40

3

This is what you need in the CSS:

html, body {
    height: 100%; 
    width: 100%; 
    margin: 0; 
}

edited Dec 13 '19 at 12:40

Massimiliano Kraus

3,638
5
27
47

answered Jul 29 '14 at 10:26

SiggeLund

99
5

score 2 · Answer 8 · answered Jun 19 '15 at 21:46

the root parent have to be in pixels if you want to work freely with percents,

<body style="margin: 0px; width: 1886px; height: 939px;">
<div id="containerA" class="containerA" style="height:65%;width:100%;">
    <div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;">
       <div style="height: 100%;width: 50%;float: left;"></div>
       <div style="height: 100%;width: 28%;float:left">
            <img src="img/justimage.png" style="max-width:100%;max-height:100%;">
       </div>
       <div style="height: 100%;width: 22%;float: left;"></div>
    </div>
</div>
</body>

Css height in percent not working

8 Answers8

Linked

Related