无法将 FOOTER 推到页面底部答案

【问题标题】：Cannot push FOOTER to the bottom of page无法将 FOOTER 推到页面底部
【发布时间】：2014-05-22 13:22:59
【问题描述】：

我不擅长网页设计，我正在做一个由Adobe Dreamweaver自动生成的网页模板。

即使页面上没有内容，我也想将footer的DIV推到页面底部。

这是.CSS（我省略了一些）

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 
}

这是我页面的常见标记。

<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>

页面上的页脚看起来像

我已经为 footer 尝试过这个。

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

但是页面看起来像

【问题讨论】：

@Lorenzo 你偷了我的话！那些不知道答案的人，他们投反对票。
并非所有 SO 用户都很聪明
@Lorenzo 聪明到可以按下 DownVote

标签： html css footer

【解决方案1】：

这是我使用的一个解决方案，它是一个 HTML 5。但这应该适合你。只需更改课程，您就可以开始了。

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

见Fiddle

您也可以使用效果相同或更好的固定位置方法

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

【讨论】：

你看小提琴了吗？？
是的，它确实在底部，但是看我问题中的第二张图片，看看页面内容的背景颜色，它已经改变了
那是因为你在浮动你的 .sidebar1。你不能漂浮。浮动将元素移动到 DOM 之外。删除浮动并添加 Display:inline-block.. 问题已解决。
侧边栏的任何元素都应该有 display: inline-block。它前面的元素将相应地对齐

【解决方案2】：

检查DEMO。

检查底部的3行负责将页脚保持在底部。

.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】：

你可以试试

<!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>

【讨论】：