Question

出于某种原因，我的页脚并没有像往常一样移动到内容的底部，而且我已经在我的代码之间来回扫描并且无法找出问题所在。我使用了html和css验证器，他们看到我的编码没有错误。我想也许我在某个地方错过了一个引号或半冒号，但我无法弄清楚是什么导致了这个问题。

这是一个显示https://jsfiddle.net/Optiq/n6xmhL2j/1/

上发生了什么的小提琴

这是HTML

<body>
<div id="front_page" class="page">
    <header>WELCOME SLIDESHOW</header>

    <div id="intro_links">
        <a class="nav_link" href="#">New Artists</a>
        <a class="nav_link" href="#">New Designs</a>
        <a class="nav_link" href="#">New Garments</a>
        <a class="nav_link" href="#">How it Works</a>
    </div>

    <div id="new_artists" class="title_01">New Artists</div>

    <div class="new_artist_pane">
        <div class="art_pane01">

        </div>

        <div class="art_pane01">

        </div>

        <div class="art_pane01">

        </div>
    </div>

 </div><!--front_page-->

<footer>footer</footer>
</body>

这是CSS

@charset "utf-8";
/* CSS Document */

body{
margin:0;
padding:0;
height:auto;
width:100%;
display:block;
/*background-color:#36F;*/
}

header{
width:100%;
height:444px;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}

footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}

.page{
width:100%;
height:auto;
margin-bottom:4%;
display:block;
}

#intro_links{
width:88%;
overflow:auto;
margin:auto;
display:block;
}

.nav_link{
width:23%;
height:137px;
float:left;
text-align:center;
text-decoration:none;
margin:4% 0 4% 2%;
display:block;
background-color:#03C;
color:#fff;
}

.title_01{
width:44%;
height:44px;
background-color:#666;
font-size:29pt;
color:#fff;
display:block;
float:left;
clear:both;
}

.new_artist_pane{
width:66%;
height:auto;
border:solid 1px #333;
float:left;
margin:4% 0 0 2%;
display:block;
}

.art_pane01{
width:100%;
height:333px;
float:left;
border:solid 1px #CCC;
margin-bottom:4%;
display:block;
}

Answer 1

如果您的元素包含float

，则会发生此类情况

内容从左浮动框的右侧向下流动，向下流向右浮动框的左侧... 由于浮动不在流程中，之前创建的非定位块框并且在浮动框垂直流动之后，好像浮动不存在一样。

在关闭div：

之前添加此权限

<div style="clear:both;"></div>
 </div><!--front_page-->

<footer>footer</footer>

JS Fiddle

Another- 并且更好，因为我们不必向页面添加额外的标记 - 这样做的方法是将.clearFix类添加到父容器div其结束标记</div>正好在footer之前，为此更改了此内容：

<div id="front_page" class="page clearfix">

到此：

<div id="front_page" class="page clearfix">

并把它放在你的css中：

.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

或:before和:after：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

这是显示上述技术的JS Fiddle 2

更多细节： https://css-tricks.com/the-how-and-why-of-clearing-floats/ http://www.positioniseverything.net/easyclearing.html

Answer 2

<强> DEMO

可能你给了float:left每个可能的元素，这就是令人不安的因素。只需将其添加到footer，如下所示：

footer{
    width:100%;
    height:111px;
    margin-top:4%;
    background-color:#999;
    color:#fff;
    text-align:center;
    display:block;
    float:left;//here
}

Answer 3

有三种方法可以做到。

FIRST。

将float:left;添加到页脚。

footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left; // add this
}

第二

设置页脚inline:block或inline-table

的显示

footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:inline-block; // or display:inline-table;
}

THIRD。

将clear:both;添加到页脚。

footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear:both; // add this
}

Answer 4

回答你需要的最简单的方法和最简洁的方法就是在CSS中添加clear：both。

    footer{
       width:100%;
       height:111px;
       margin-top:4%;
       background-color:#999;
       color:#fff;
       text-align:center;
       display:block;
       clear: both; //add this here
    }

什么阻止我的页脚向下移动页面？

4 个答案: