CODEWITHSUNDEEP
javascripthtmlcss
Slaythern Aareonna
Slaythern Aareonna

Reputation: 353

Make body 100% height of browser window

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

Upvotes: 3

Views: 16299

Answers (3)

Adnane Ar
Adnane Ar

Reputation: 683

try height: 100vh;

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

Upvotes: 1

Stickers
Stickers

Reputation: 78676

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*/
}

Upvotes: 5

Lloyd
Lloyd

Reputation: 29668

Add:

html {
    height: 100%;
}

To your CSS.

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

Upvotes: 6

Related Questions