如何让我的页脚推送内容？
好的，我在我正在设计的页面上有这个页脚，但我遇到了一个问题；页脚停留在页面的底部，但内容可以越过它……这就是我的意思-- http://i46.tinypic.com/2zted15.png。
下面是我的页脚的CSS/HTML代码：http://pastebin.com/ZKCuBjhn
在进阶阶段非常感谢。
编辑:以下是整个页面的代码- HTML代码: pastebin.com/RAj11cPP - CSS代码: pastebin.com/0kMgb1R2
注意:可笑的数量
代码中的标签是为了演示我的问题。
回答 2
Stack Overflow用户
发布于 2012-05-09 05:20:53
尝试将clear: both;添加到页脚样式。不过，如果能看到页面其余部分的代码，那就太好了。
的真实答案：
看过您的代码后，看起来这更像是您想要的：http://pastebin.com/Letx9hPA
我将你的页脚的位置改成了固定的，这样它就会停留在页面的底部。如果这不是你想要的，那么移除所有的位置，这样它就可以自由地被推下。
此外，我将您的内容包装在一个content div中，这样我就可以在底部添加所需的间隔符，使其全部可见。通过设置padding-bottom: 100px添加间隔，这是页脚的高度。
Stack Overflow用户
发布于 2012-05-09 05:41:44
您正在使用position: absolute作为div，所以您将从页面的正常流中删除它，然后，上面的内容将通过。
如果你之前的html是一个div或者类似于包含整个上层部分的东西，那么使用div，不要“绝对定位”它，使用width: 100%和piece :0 auto；问题不在于你的页脚，而是出现在页脚之前的代码。
如果它是一个div，你必须给出一些高度，但使用min- height，所以当它里面的内容溢出时，div表现良好，并将你的页脚向下推。如果您使用高度，那么div将采用该高度，并且溢出的内部将会泄漏。
下面是一个简单的代码：
body {
background-color: #d6d6d6;
}
.header {
background-color: #006F8D;
color: #fff;
margin: 0 auto;
width: 600px;
height: 100px;
}
.center {
background-color: #fff;
color: #454545;
margin: 0 auto;
width: 600px;
min-height: 100px;
}
.footer {
background-color: #fff;
color: #454545;
margin: 0 auto;
width: 600px;
height: 50px;
border-top: 1px solid #ccc;
}这是针对CSS的，现在针对HTML：
<div class="header">menu 1 - menu2 - menu3</div>
<div class="center">Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br /><br />
v
v
Middle<br /><br />Middle<br /><br />Middle<br /><br />v
v<br />v
Middle<br /><br />v
v<br />Middle<br />
v
v
v
v
v
v
vMiddle<br />Middle<br />Middle<br />Middle<br />
<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />
</div>
<div class="footer">Footer</div>如果你需要绝对定位你的页脚，那么答案是另一个。让我明白这一点，我会回答另一个问题。
编辑:你的代码和我的代码(没有使用你的css，天啊，不要使用那些不推荐使用的标签！字体、居中等)
<style type="text/css">
.header {
background-color: #006F8D;
color: #fff;
margin: 0 auto;
width: 600px;
height: 100px;
}
.center {
background-color: #fff;
color: #454545;
margin: 0 auto;
width: 600px;
min-height: 100px;
}
.footer {
background-color: #fff;
color: #454545;
margin: 0 auto;
width: 600px;
height: 50px;
border-top: 1px solid #ccc;
}
</style>
</head>
<title>Website Homepage</title>
<body>
<!--====================Begin Navigation Bar========================-->
<div class="header" id="navigation">
<div style="float:left;">
<a href="index.html">Home</a>
<a href="signup.html">Sign Up</a>
<a href="login.html">Login</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</div>
<!--====================End Navigation Bar==========================-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--====================Begin Content Area======================-->
<div class="center" style="padding:10">
See my problem?
</div>
<!--====================End Content Area========================-->
<!--====================Begin Footer========================-->
<div class='footer'>
<div style="padding-top:20px;">
Website. All Rights Reserved.
<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<input name="q" type="hidden" />
<input type="text" placeholder="Search our site..." name="qfont" /> <input type="submit" value="Search" />
</form>
</div>
</div>
<!--====================End Footer==========================-->
</body>
</html>https://stackoverflow.com/questions/10506609
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号