CODEWITHSUNDEEP
htmlcss
Idrizi.A
Idrizi.A

Reputation: 12010

Full screen page with 100% body height

Is there any way to make a page with header, sticky footer and the body should always fit 100% of the screen height - header and footer, with only HTML and CSS. See the image for more. ­

Image

Upvotes: 1

Views: 3154

Answers (3)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

You can use an approach which allows you to keep the body at 100% height and have a sticky footer as well using a modern sticky footer approach:

http://mystrd.at/modern-clean-css-sticky-footer/

Steps to achieve this:

1. box-sizing:border-box;

2. html { position: relative; height: 100%;}

3. body{ text-align: center; min-height: 100%; margin: 0; overflow: hidden;}

4. container: absolute positioned with a top of the header height.

5. footer: absolute positioned with left and bottom:0;


Look at this demo:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html {
    position: relative;    
    height: 100%;
}
body {
    text-align:center;
    min-height: 100%;
    margin:0;
    overflow:hidden;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px; /* Height of Footer */
    width: 100%;
}
header {    
    height: 50px; /* Height of header */
    line-height:50px; /* vertical align the title*/
    width: 100%;
    background-color:lightgreen; 
}
.container{
      background-color: darkgreen;
      height: 100%;
      position: absolute;
      top: 50px;  /* Height of header */
      left: 0;
      bottom: 0;
      width: 100%;
      right: 0;    
}
footer{
    background-color:yellow; 
    line-height:50px; /* vertical align the title*/
}
<header>HEADER</header>
<div class="container"></div>
<footer>FOOTER</footer>

Inspecting you will see that the body will always be 100% height and the footer will be sticky at the bottom.

Ps. Added box-sizing: border-box just because it's a good practice but it's not necessary for this approach.

Upvotes: 2

Athax
Athax

Reputation: 182

Add this to your css 

html, body {
    height: 100%;
    }

And make a div, that has the content you called body, then give it 100% in height.

For an example

<header>..</header>
<section id="content"> <--- HAS 100% IN HEIGHT.
     ....content
</section>
<footer>..</footer>

Like this:

#content {
    width: 960px; <-- definable.
    height: 100%;
}

Upvotes: -1

Angel Angeles III
Angel Angeles III

Reputation: 300

If you're using a container in the body after the header then you should set your css like this:

 .container {width: 100%; height: 100%; content: "" ;}

Upvotes: 0

Related Questions