CSS full page height content

Question

I'd like to build a website with a full height whatever the user's screen. Scroll is impossible, everything is shown in the page. I tried something like :

<body>
  <div class="header">
    test
  </div>
  <div class="central">
    test
  </div>
  <div class="footer">
    test
  </div>
</body>

html,body{
  height:100%;
}
.header,.footer{
    height: 20%;
  background-color:blue;
}
.central{
    min-height:60%;
  background-color:red;
}

It works in my screen with a big resolution but not in my 15", page is scrollable. If body is limited to 100%, why all the elements aren't in the page? JSFIDDLE

Thanks.

You need to reset CSS before applying your own CSS, because there's a browser applied default margin to `body`. In this case you could get away with applying `margin:0;` to `body`, but it's better to use a general CSS reset such as http://meyerweb.com/eric/tools/css/reset/ — leroydev, Dec 04 '15 at 14:43
@leroydev the `body` tag has `margin`, not `padding` and I disagree strongly with *it being better to use a general reset* since some defaults are actually *not bad* and without for instance `padding` on a `ul` (due to the reset) you won't see the bullets in front of the items etc... — SidOfc, Dec 04 '15 at 14:44
Check this [enter link description here](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1) — shaikh, Dec 04 '15 at 14:45
@SidneyLiebrand haha sorry, fixed it, friday afternoons hehe.. — leroydev, Dec 04 '15 at 14:46

score 5 · Accepted Answer · answered Dec 04 '15 at 14:42

5

Because the body has built-in margin.

Just remove it.

A normal CSS Reset would generally have this as standard.

html,
body {
  height: 100%;
  margin: 0;
  /* see? */
}
.header,
.footer {
  height: 20%;
  background-color: blue;
}
.central {
  min-height: 60%;
  background-color: red;
}

<body>
  <div class="header">
    test
  </div>
  <div class="central">
    test
  </div>
  <div class="footer">
    test
  </div>
</body>

answered Dec 04 '15 at 14:42

Paulie_D

107,962
13
142
161

Thanks. I followed your link and did a CSS reset – Ty Yt Dec 04 '15 at 16:00

score 1 · Answer 2 · answered Dec 04 '15 at 14:47

1

I think it's because the body has margins. Try :

html,body { 
  height:100%; 
  min-height:100%; 
  max-height:100%; 
  margin:0px;
  padding:0px; 
}

answered Dec 04 '15 at 14:47

Giuseppe

151
1
5

AldoZumaran · Answer 3 · 2015-12-04T15:43:33.193

0

set min height to html tag and remove default margin, padding to body tag

html{  
    min-height:100%;
}

body{

    padding: 0;
    margin: 0;
    min-height:100%;
    width: 100%;
    height: 100%;

}

edited Dec 04 '15 at 15:43

answered Dec 04 '15 at 14:48

AldoZumaran

547
5
23

Please add details to your answer so that OP and future readers can understand why this is the answer to the question – Wand Maker Dec 04 '15 at 15:41

CSS full page height content

3 Answers3