gpt4 book ai didi

html - 页脚问题后的空白

转载 作者:太空宇宙 更新时间:2023-11-03 21:42:44 25 4
gpt4 key购买 nike

我正在尝试解决问题,但没有成功。 我的页脚,如果网站的内容填充在页脚中,通常在底部,但如果页面上的内容很少,页脚会上升,因为我有 2 个不同的页脚,最后一个页脚是白色的,然后我有一个巨大的我的第二个页脚下的空白区域。

我试图找到一个解决方案,当我的页面上内容很少时,我的两个页脚会爬上去,但底部没有空白。

在我的第二个页脚之后,我只想要页面的末尾,而不是一个巨大的空白区域。

我已经尝试在我的页脚 bottom: 0, position: fixed 上用 css 做,但到目前为止我没有成功实现我的目的。

有人遇到过这个问题吗?你能帮忙吗?

我的 jsfiddle 和我的例子

http://jsfiddle.net/ritz/wzex4/

我的 html:

<footer id="footer-container">


<section id="footer1">

<div id="col">
<h1>Newsletter</h1>
<ul>
<li class="home"><i class="fa fa-home"></i> <a href="#">Write your email</a></li>
</ul>
</div>

</div>
</section>
<section id="footer2-container">
<div id="footer2">
<p>&copy; copyright</p>

</div>
</section>
</footer>

我的CSS:

#footer-container
{
width:100%;
float:left;
background:#ccc;
margin-top:15px;
bottom:0;
}

#footer1
{
width:960px;
margin:10px auto 0 auto;
height:165px;
}

#footer2-container
{
width:100%;
height:60px;
float:left;
background:#000;
bottom:0;
margin-top:15px;
}

#footer2
{
width:960px;
margin:15px auto 0 auto;
}

#footer2 p
{

color:#fff;
font-size:14px;

}

我得到的是: enter image description here

最佳答案

在你的 #footer2-container 中添加 position: absolute;

Working Fiddle

关于html - 页脚问题后的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22521798/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com