Sticky Footer CSS | 易学教程

问题

I have a pretty basic site (header,content,footer no sidebars or anything) the problem is the content area is overlapping the footer. I have tried all the sticky footer fixes (i.e csstricks, ryanfait.com and a few others I found on google and some on here and none of them work

As usual any help is appreciated

    <body>
     <div class="wrapper">


            <div id="header">
            </div>

            <div id="content">      
            </div>

            <div id="push">
            </div>

     </div>

     <div id="footer">
     </div>

</body>



    * {
margin: 0;
}

html, body {
height: 100%;
}



#header{
    background-image:url("Images/nav.jpg");
    width:100%;
    height:64px;
}

#content{
    background:#ffffff;
    height:592px;
    width:798px;
    position:absolute;
    top:80px;
    left:20%;
    z-index:3;
    -moz-box-shadow: 0px 0px 8px #000000; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 8px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #000000; /* Opera 10.5, IE9, Chrome 10+ */
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -129px;
}

#footer, #push {
height: 129px;
}

#footer{
    background-color:#292929;
    width:100%;
}

回答1:

Why is your content absolutely positioned? It does not seem to be needed and will cause the issues you are experiencing. Remove that and make the footer:

#footer {
 position: fixed;
 bottom: 0;
 height: 80px; 
}

http://jsfiddle.net/JyQxW/

回答2:

Are you trying to make a sticky footer, i.e. one that is always at the bottom of the page even when you scroll, or are you just trying to fix the content-overflow issue?

To keep the content from overflowing, float #content to the left or right.

回答3:

You could try to clear both before you begin your footer..

<div style="clear:both"></div> <!-- add this line just above your div footer -->
<div id="footer">

来源：https://stackoverflow.com/questions/5822825/sticky-footer-css

标签

html

css

sticky-footer