3

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

2

3 Answers 3

6

Add:

html {
    height: 100%;
}

To your CSS.

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

1
  • 1
    @SlaythernAareonna then why did you mark it as solved? I prefer to use height: 100vh; which uses the viewport height.
    – CWSites
    Jan 30, 2019 at 15:55
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*/
}
0
1

try height: 100vh;

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.