How to stick footer always to the bottom of the page if the content is very less?

问题

The footer should remain in the bottom even when i re size the page. In my case footer is overlapping the contents when i re size the height of the page.

 .body{
    	background: #00b7ea; /* Old browsers */
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:85%;
            height: 100%;
    }

    .container{
     min-height:100%;
     position: relative;
    }
    .formContainer{
    	width:30%;
        height: 100px;
    	background-color:#fff;
    	margin:auto;
            padding-top: 0;
    	border-radius:5px;
    	box-shadow:5px 5px 55px #9999;
    	padding-bottom:60px;
    }
    .footer{
        position:absolute;
    	width:100%;
        bottom:0;
    	height:60px;
    	background-color:#333;
    }

<body class="body">
      	<header class="header">
    	</header>
      	<div class="container">
                    <div class="formContainer">
                    </div>
    		<footer class="footer">
    		</footer>
         </div>
     </body>

回答1:

You should move footer tag out of the div

<header class="header">
    </header>
    <div class="container">
                <div class="formContainer">
                </div>        
     </div>
    <footer class="footer">
    </footer>

DEMO

Add height:100% to html and body, then only your container takes height 100% and leave your html code as it is.

html, body{
    height:100%
}

DEMO 2

P S - I think .body in your CSS is a mistake, it should be only body

回答2:

What you need is Sticky Footer, there are couple of ways to implement it.

http://css-tricks.com/snippets/css/sticky-footer/ (using CSS)
http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/ (using jQuery)

回答3:

try this

http://jsfiddle.net/WPYCJ/

.footer{
    position:fixed;
    width:100%;
    bottom:0;
    height:60px;
    background-color:#333;
}

回答4:

Try this. Thanks

CSS

 .body{
    background: #00b7ea; /* Old browsers */
    font-family:Arial, Helvetica, sans-serif;
    font-size:85%;
        height: 100%;
}

.container{
 height:90%;
background-color:#fff;
}
.formContainer{
    width:100%;
    height: 100px;
        margin:auto;
        padding-top: 0;
    border-radius:5px;
    box-shadow:5px 5px 55px #9999;
    padding-bottom:60px;
}
.footer{
    width:100%;
    bottom:0;
    height:5%;
    background-color:#333;
}

HTML

<body class="body">
    <header class="header">
    </header>
    <div class="container">
                <div class="formContainer">
                </div>
             </div>
<footer class="footer">test
        </footer>

 </body>

回答5:

I Had the same problem, I used this code :

<script>
    var top = $(document).height() - $("footer.main-footer").height() ; 
     $("footer.main-footer").css('top' , top);
</script>

Change .main-footer to your footer's class.

来源：https://stackoverflow.com/questions/17802747/how-to-stick-footer-always-to-the-bottom-of-the-page-if-the-content-is-very-less

标签

javascript

html

css

html5

css3