Html 无法将页脚推到页面底部_Html_Css_Footer

Html 无法将页脚推到页面底部

html css

Html 无法将页脚推到页面底部,html,css,footer,Html,Css,Footer,我不擅长网页设计，我正在制作一个由Adobe Dreamweaver自动生成的网页模板 position: fixed; bottom: 0; width: 100%; 我想把页脚的DIV推到页面底部，即使页面上没有内容这是.CSS（我省略了一些）这是我的页面的常用标记 <body> <div class="container"> <?php include('templates/header.php'); incl

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

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

我想把

页脚

的

DIV

推到页面底部，即使页面上没有内容

这是

.CSS

（我省略了一些）

这是我的页面的常用标记

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

但是页面看起来像

这是我使用的一个解决方案，它是HTML5。但这应该对你有用。只要换个班，你就可以走了

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

看

此外，您还可以使用固定位置方法，该方法效果同样好或更好

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

检查

检查底部的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%;
}

你可以试试

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


html，正文{
保证金：0；
填充：0；
身高：100%；
}
.集装箱{
宽度：960px；
保证金：自动；
最小高度：100%；
位置：相对位置；
背景：#FFF；
}
.标题{
高度：50px；
背景#ADB96E；
}
.侧边栏1{
浮动：左；
宽度：180px；
背景:#EADCAE；
垫底：10px；
}
.内容{
背景：#5ee；
填充：10px0；
宽度：780px；
浮动：左；
}
.内容{
填充底部：80px；/*页脚元素的高度*/
}
.页脚{
宽度：100%；
高度：80px；
位置：绝对位置；
底部：0；
左：0；
背景：#CCC49F；
}
这是一个简单的页脚

你看到小提琴了吗？是的，它确实在底部，但是看到我问题中的第二张图片，看看页面内容的背景色，它被改变了，这是因为你正在浮动你的.sidebar1。你不能漂浮。浮动将元素移动到DOM之外。删除浮动并添加显示：内联块。。问题解决了。无论是什么元素，侧边栏都应该有display:inline块。它前面的元素将对齐accordingly@Lorenzo你偷了我的话！那个些不知道答案的人，投了反对票。并非所有的用户都是这样smart@Lorenzo聪明到可以按下投票按钮

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