Question

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

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

这是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 
}

页面上的页脚看起来像

enter image description here

我已经为<body> <div class="container"> <?php include('templates/header.php'); include_once('templates/sidebar.php'); ?> <div class="content"> </div> <div class="footer"> <p>This is a simple footer.</p> </div> </div> </body>尝试了这个。

footer

然后页面看起来像

enter image description here

Answer 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%;
}

Answer 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%;
}

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

无法将FOOTER推到页面底部

3 个答案: