How to change my css code to fit the footer to the bottom of the page for any size of monitor?


Tags: css,css3

Problem :

I am following this tutorial link but do not know how to put the footer on the bottom of the page so when the user open the page the footer is on the very bottom of page regardless of size of the monitor.

So that when they change the size of window or use a bigger monitor footer should be at the end of page.

The important part is that I do not have much text in my content section so the scroll bar is expected to be invisible in any size of monitor.(those that are not very tiny)

*Please also note that I have looked at the previous question but could not find a correct answer. * If you know of any other tutorial I would appreciate your suggestion. (I need float layout)

Layout

 container
    {
       header
       content
       { 
         leftnav | rightnav
       }
       footer
    }

Css

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }


Solution :

try this :

#footer{
        position: absolute;
        bottom: 0px;
        height: 50px;
        width: 100%;
    }

    CSS Howto..

    Can't figure out how to code my css

    AngularJS - how to refactoring a CSS code style

    How is font-size not working here?

    How to control spaces/margin between bars?

    How to leave some top gap for H2 title tag with css

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates

    how to tell org-mode to embed my css file on HTML export?

    How to implement image sticker (ribbon) with css3

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    how to place image on image?

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    how to make textarea looks like input[text] on form invalid

    How to shrink the menu when mouse hover on a link using jquery

    How to horizontally center text in bootstrap button?

    How to make a sidebar that stretches to the page length?

    How can I make a fixed background image not stay fixed on scroll?

    How Can I Make The HTML Page More Narrow?

    How to avoid text wrap when the parent element has position absolute?

    CSS - how to place an error/hint message to the right of the input box

    How to override previous onClick css class change (jQuery)

    How do I pass a background-image url from one div onto another using jQuery?

    How to resize and float right a background image using css?

    How to add JS to Wordpress and reference CSS or other scripts?

    How can I adjust my thumbnail which exceeds its designated area?

    How can I apply text attributes to text in a list in CSS

    How to add custom layout and css in a CakePHP application?

    How do I centralize an ordered list?

    How to draw lines in ionic

    How to make hovering over a class to trigger changes in other classes?