Chân trang của tôi nếu khá cao vì vậy tôi tự hỏi liệu có thể để nội dung chồng lên nhau một chút trong khi vẫn còn trong luồng nội dung không?nội dung động trùng lặp chân trang nhưng vẫn nằm trong luồng nội dung?
Tôi cho rằng phương án thay thế là đặt chân trang thành cao một vài nghìn pixel và đặt nó ở dưới cùng. Nó không phải là một giải pháp thanh lịch mặc dù, bất cứ ai có một ý tưởng tốt hơn?
Điều đó có vẻ là một ý tưởng hay. Nếu bạn cần chồng chéo, thì một số vị trí tuyệt đối phải được thực hiện.
Đặt chân trang của bạn hoàn toàn ở cuối trang và chỉ mục z: 0. Sau đó, nội dung của bạn z-index: 1 và padding-bottom: (chiều cao chân trang - chồng chéo mong muốn).
Cảm ơn Seb, có vẻ như là một giải pháp tốt cho tôi. Tôi sẽ thử nó, cảm ơn rất nhiều :) – morktron
Hi Seb, tôi đã nhận nó làm việc :) http://www.digiflipconcepts.com/smokinhot/templates/smokinhot/ Mặc dù tôi đã thêm một cột bên trái chỉ để thực hiện mọi thứ khó khăn hơn một chút nhưng tôi dường như không thể ở trong luồng nội dung. Bất kỳ ý tưởng? – morktron
Bạn có thể sử dụng sticky footer mà tôi tìm thấy một thời gian trước in this question
Tôi làm điều này mà hoạt động trong Firefox, nhưng tôi không thể làm cho nó chơi đẹp với sự giúp đỡ IE 7. Bất kỳ ai của sẽ được awesome.
EDIT: Made nó hoạt động
<!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>
Cảm ơn, không chính xác những gì tôi đang tìm kiếm nhưng một nguồn tài nguyên tuyệt vời :) – morktron
Tôi biết. Tôi đang cố gắng ngay bây giờ để sử dụng nó để làm chồng chéo, mà là một cái nhìn tốt đẹp bằng cách này. Tôi thực sự thích ý tưởng. – MrChrister
+1 cho các ghi chú khăn ăn –
nhờ Ken, tôi khao khát trở thành một khăn ăn nốt vua một ngày nào đó và nhờ bạn là một bước gần hơn;) – morktron
đồng ý với đầu tiên bình luận. 1 cho ghi chú khăn ăn :) –