CSS full page height content

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.

Answers


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>

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

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

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%;

}

Need Your Help

Set UITextFieldDelegate & release after UITextField dealloc, self contained

iphone objective-c ios ipad delegates

I have created a class that implements UITextFieldDelegate so I only need to use [MyDelegateClass setDelegate:textField someConfigparams:...] in order to use it. Inside it will create an object and

Rendering multiple objects with OpenGL shaders

opengl graphics glsl

In OpenGL with shaders, I want to render two objects which I have loaded as two meshes. Each object is represented by a set of vertex positions, a set of vertex colours, and a set of vertex indices...