我有一个简单的2列布局,页脚可以清除标记中的左右div.我的问题是我无法在所有浏览器中让页脚停留在页面底部.如果内容向下推动页脚,它就可以工作,但情况并非总是如此.
它在Firefox中无法正常工作.当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时,我在页脚下方看到一条背景颜色条.不幸的是,这是页面的默认状态.
虽然我网站上的大多数页面都有足够的内容可以将页脚推到页面底部,适合大多数人.无论如何,无论屏幕尺寸如何,我都知道它始终固定在底部.
我已经尝试了很多方法,比如底部:0x; position:absolute:等等.似乎工作得很好,偶尔会将页脚从容器中推出,然后使用其中的一些示例将其固定到底部.
包括页脚两部分的HTML和CSS(页脚和版权栏).<section id="footer"> div无论如何,他们都在内心.
我删除了我的尝试,以便人们可以立即查看它,看看当前的代码是什么修改.
实时网址 - http://www.mangdevelopment.co.uk/nakedradish
(这是一个餐厅网站.不要担心'裸体'这个词).
HTML
<section id="footer">
<div class="container">
<div class="row">
<div class="span1">
<div id="small-logo">
<img src="img/small-logo.png" />
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR BOXES</h6>
<ul>
<a href="#">
<li>Classic Box</li>
</a>
<a href="#">
<li>Vegetarian Box</li>
</a>
<a href="#">
<li>Family Box</li>
</a>
<a href="#">
<li>Dinner Party Box</li>
</a>
<a href="#">
<li>Gift Box</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR RECIPES</h6>
<ul>
<a href="#">
<li>Last Weeks Feature</li>
</a> …我有一个非常基本的HTML页面.代码如下所示:
<body>
<header style="min-height: 255px;">
</header>
<article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
Body text goes here.
</article>
<footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
Copyright information
</footer>
</body>
通常,我的正文是相当大的.文本足够大,需要滚动条.看起来页脚位于文本顶部的底部.然后,当我向下滚动时,页脚不会保持固定.我究竟做错了什么？
谢谢