Make body 100% height of browser window

Question

I have this structure:

<body>

    <div id="header">..</div>

    <div id="content">..</div>

    <div id="footer">..</div>

</body>

And this CSS:

body { color: white; font-family: 'Play', sans-serif; max-width: 2560px; margin: 0 auto; min-width: 960px; height:100%; padding:0; }

#header {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    min-width: 960px;
    height: 95px;
    background-image: url("../images/header-bg.png");
}

#content {
    margin: 0 auto;
    position: relative;
    max-width: 1600px;
    height:100%;
    overflow:hidden;
}

#footer {
  background-color: #009EDB;
  background-image: url("../images/footer-bg.png");
  bottom: 0;
  height: 30px;
  margin: 0;
  position: relative;
  width: 100%;

}

But not body height 100% of browser windows. What's my problem? Thanks.

jsFiddle

Have you tried adding: `html { height: 100%; width: 100%; }` ? — mqchen, Dec 14 '12 at 14:02
Possible duplicate [stackoverflow.com/questions/1575141/...](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — War10ck, Dec 14 '12 at 14:04

score 6 · Accepted Answer · answered Dec 14 '12 at 14:02

6

Add:

html {
    height: 100%;
}

To your CSS.

See update here - http://jsfiddle.net/xkTpV/4/

answered Dec 14 '12 at 14:02

Lloyd

29,197
4
84
98

1

@SlaythernAareonna then why did you mark it as solved? I prefer to use `height: 100vh;` which uses the viewport height. – CWSites Jan 30 '19 at 15:55

Stickers · Answer 2 · 2015-06-20T21:27:20.870

5

In order to make it work. You'll have to make the parent <html> and the child <body> to both have 100% height.

html, body {
    height:100%; /*both html and body*/
}
body {
    margin: 0; /*reset default margin*/
}

edited Jun 20 '15 at 21:27

answered Dec 14 '12 at 15:15

Stickers

75,527
23
147
186

score 1 · Answer 3 · answered Jun 21 '19 at 19:56

1

try height: 100vh;

body { color: white; font-family: 'Play', sans-serif; max-width: 2560px; margin: 0; min-width: 960px; height:100vh; padding:0; }

answered Jun 21 '19 at 19:56

Adnane Ar

683
7
11

Make body 100% height of browser window

3 Answers3