个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 11:07:29 26 4
gpt4 key购买 nike

出于某种原因，我的页脚没有像往常一样移动到内容的底部，我来回检查我的代码，但无法找出问题所在。我同时使用了 html 和 css 验证器，他们没有发现我的编码有任何错误。我想也许我在某处遗漏了一个引号或分号，但我无法弄清楚是什么导致了这个问题。

这是一个 fiddle 来展示发生了什么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;
}

最佳答案

当您的元素带有 float 时，就会发生这种情况。

Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.

在关闭 div 之前添加此项:

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

<footer>footer</footer>

JS Fiddle

另一个 - 更好，因为我们不必向页面添加额外的标记 - 方法是添加 .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

关于html - 是什么阻止我的页脚向下移动页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33864412/

26 4 0
文章推荐： css - Target Parent 和其他一些选择器
文章推荐： java - @ApiParam 不适用于 springfox swagger 2
文章推荐： java - 如何在android中实现客户端服务器来制作BINGO游戏，但不用于聊天应用程序
文章推荐： linux - 如何从标准输出和标准错误中删除 ^M
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com