Cannot push FOOTER to the bottom of page

问题

I am not good in web-designing, I am working on a web template that was automatically generated by Adobe Dreamweaver.

I want to push the footer's DIV to the bottom of page even I have no content on the page.

This is .CSS (I have omitted some of it)

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}

.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto;
}

.header {
    background: #ADB96E;


}
.sidebar1 {
    float: left;
    width: 180px;
    background: #EADCAE;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 780px;
    float: left;
}


/* ~~ The footer ~~ */
.footer {
    padding: 10px 0;
    background: #CCC49F;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the 
}

And this is the common markup of my pages.

<body>

    <div class="container">

       <?php 
    include('templates/header.php');
    include_once('templates/sidebar.php'); 
       ?>
        <div class="content">
        <!-- end .content --></div>
         <div class="footer">
            <p>This is a simple footer.</p>
         <!-- end .footer --></div>
    <!-- end .container --></div>
</body>

And footer on page looks like

I have tried this for footer.

position: fixed;
bottom: 0;
width: 100%;

But then page looks like

回答1:

Here is a solution that I use, its a HTML 5. But this should work for you. Just change the class and you should be good to go.

footer {
    background: #000;
    position: absolute;
    bottom: 0px;
    display: flex;
    height: 40px;
    width: 100%;
}

See Fiddle

Also you can use the fixed position approach which works just as good or better

footer {
    background: #000;
    position: fixed;
    bottom: 0px;
    display: flex;
    height: 40px;
    width: 100%;
}

回答2:

Check the DEMO.

Check the 3 lines at bottom are responsible to keep the footer at bottom.

.footer {
padding: 10px 0;
background: #CCC49F;
clear: left;
/*Below 3 lines are the responsible to keep it at bottom*/
position: absolute; 
bottom:0;
width: 100%;
}

回答3:

you can try

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    html, body {
        margin:0;
        padding:0;
        height:100%;
    }
    .container {
        width: 960px;
        margin:auto;
        min-height:100%;
        position:relative;
        background: #FFF;
    }

    .header {
            height: 50px;
        background: #ADB96E;
    }

    .sidebar1 {
        float: left;
        width: 180px;
        background: #EADCAE;
        padding-bottom: 10px;
    }
    .content {
        background:#5ee;
        padding: 10px 0;
        width: 780px;
        float: left;
    }
    .content {
        padding-bottom:80px; /* Height of the footer element */
    }

    .footer {
        width:100%;
        height:80px;
        position:absolute;
        bottom:0;
        left:0;
        background: #CCC49F;
    }
</style>
</head>
<body>

<div class="container">
    <div class="header">        
    </div>
    <div class="sidebar1">      
    </div>
    <div class="content">       
    </div>
    <div class="footer">
        <p>This is a simple footer.</p>
    </div>
</div>

</body>

来源：https://stackoverflow.com/questions/23798094/cannot-push-footer-to-the-bottom-of-page

标签

html

css

footer