Html 动态内容重叠页脚但仍在内容流中？
我的页脚是否很高，所以我想知道是否有可能让内容稍微重叠，同时仍保留在内容流中 我认为另一种方法是将页脚设置为几千像素高，并将其放置在底部。但这不是一个优雅的解决方案，有人有更好的主意吗Html 动态内容重叠页脚但仍在内容流中？,html,css,Html,Css,我的页脚是否很高，所以我想知道是否有可能让内容稍微重叠，同时仍保留在内容流中 我认为另一种方法是将页脚设置为几千像素高，并将其放置在底部。但这不是一个优雅的解决方案，有人有更好的主意吗 那似乎是个好主意。如果需要重叠，则必须进行一些绝对位置 将页脚绝对设置为页面底部，z索引：0。然后你的内容z-index:1和padding-bottom:（页脚高度-所需重叠）。你可以使用我刚才找到的 这是我在Firefox中制作的，但我无法让它在IE7中发挥出色。任何人的帮助都会很棒 编辑：使其正常工作
那似乎是个好主意。如果需要重叠，则必须进行一些绝对位置 将页脚绝对设置为页面底部，z索引：0。然后你的内容z-index:1和padding-bottom:（页脚高度-所需重叠）。你可以使用我刚才找到的 这是我在Firefox中制作的，但我无法让它在IE7中发挥出色。任何人的帮助都会很棒 编辑：使其正常工作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A CSS Sticky Footer with Overlap</title>
<style type="text/css">
body {
text-align: center;
}
.wrapper {
margin: 0 auto -142px;
position: relative;
text-align: left;
width: 700px;
}
.header {
/*Go download the header yourself from http://ryanfait.com/sticky-footer/header.png
Please don't steal the guy's bandwidth*/
background: transparent url(header.png) no-repeat scroll 0 0;
height: 160px;
}
.footer_bg {
/*Go download the header yourself from http://ryanfait.com/sticky-footer/footer.jpg
Please don't steal the guy's bandwidth*/
background: transparent url(footer.jpg) no-repeat scroll 0 0;
border: 1px solid blue;
height: 100%;
margin: 0 auto;
width: 700px;
}
.footer {
clear:both;
border: 1px solid red;
margin: 0 auto;
position: relative;
width: 100%;
}
.footer_bg p {
bottom: 4px;
color: #FFFFFF;
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
height: auto !important;
min-height: 100%;
}
.push {
height: 142px;
position: absolute;
}
.footer {
height: 142px;
z-index: -1;
}
#content {
z-index: 10;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div id="content">
<h2>A CSS sticky footer that just works</h2>
<p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
<h2>Usage of the CSS</h2>
<p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>
<p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>
<p class="download"><a href="layout.css" title="Download the stylesheet">View the CSS</a> or <a href="/resources/footer-stick-to-bottom-of-page/" title="Make a footer stick to the bottom of a page">learn about using it</a></p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div class="footer_bg">
<p>Copyright © 2006-2008 <a href="http://ryanfait.com/" title="Las Vegas Web Design">Ryan Fait</a></p>
</div>
</div>
</body>
</html>
带有重叠的CSS粘性页脚
身体{
文本对齐：居中；
}
.包装纸{
保证金：0自动-142px；
位置：相对位置；
文本对齐：左对齐；
宽度：700px；
}
.标题{
/*你自己去下载标题吧http://ryanfait.com/sticky-footer/header.png
请不要偷那家伙的带宽*/
背景：透明url（header.png）无重复滚动0；
高度：160px；
}
.footer\u bg{
/*你自己去下载标题吧http://ryanfait.com/sticky-footer/footer.jpg
请不要偷那家伙的带宽*/
背景：透明url（footer.jpg）无重复滚动0；
边框：1px纯蓝色；
身高：100%；
保证金：0自动；
宽度：700px；
}
.页脚{
明确：两者皆有；
边框：1px纯红；
保证金：0自动；
位置：相对位置；
宽度：100%；
}
.footer\u bg p{
底部：4px；
颜色：#FFFFFF；
左：0；
位置：绝对位置；
文本对齐：居中；
宽度：100%；
}
* {
保证金：0；
}
html，正文{
身高：100%；
}
.包装纸{
高度：自动！重要；
最小高度：100%；
}
.推{
高度：142px；
位置：绝对位置；
}
.页脚{
高度：142px；
z指数：-1；
}
#内容{
z指数：10；
}
CSS粘性页脚
一个CSS粘性页脚，只是工作
我们都试过使用一次又一次的粘性页脚，但它们似乎从来都不正确，不是吗？好了，令人费解的基于CSS的粘性页脚的日子谢天谢地结束了。在几个简单的CSS类中，只需要很少的额外HTML标记，我就创建了一个粘性页脚，即使是初学者也可以使用它。它已经在IE5及以上版本、Firefox、Safari和Opera中进行了测试
CSS的使用
太好了！这正是我要找的！我能用它吗
当然。没有任何条款、许可证、费用或要求。你想怎么用就怎么用。如果你能在你的网站上找到我的链接，我将不胜感激，但这绝非必要。祝你玩得开心，不要害怕问我任何问题或把你的想法告诉我
或
版权及副本；2006-2008