Question

我的页脚如果相当高，所以我想知道是否有可能让内容略微重叠，同时仍保留在内容流中？

我认为另一种方法是将页脚高几千像素并将其放在底部。这不是一个优雅的解决方案，任何人都有更好的想法？

http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg

Answer 1

这似乎是一个好主意。如果你需要重叠，那么必须完成一些绝对的位置。

将页脚绝对设置在页面底部，z-index：0。然后你的内容z-index：1和padding-bottom :(页脚高度 - 所需重叠）。

Answer 2

您可以使用我之前发现的sticky footer

我制作的这个在Firefox中有效，但我不能让它与IE 7很好玩。任何人的帮助都会很棒。

编辑：让它发挥作用

    <!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 &copy; 2006-2008 <a href="http://ryanfait.com/" title="Las Vegas Web Design">Ryan Fait</a></p>
    </div>
</div>
</body>
</html>

动态内容重叠页脚但仍保留在内容流中？

2 个答案: