Question

嗨〜我在线制作艺术作品集，但我遇到了一个问题。我使用了粘性页脚ryanfaitdotcom / sticky-footer /现在我的页面似乎不必要地长了。任何建议将不胜感激！

以下是代码：

已删除，因为它错了。正确的代码可以在底部找到

或在这里：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>





</head>

<body>
<div class="wrapper">
    <div id="page-wrap" class="group">
        <div id="main-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut </p>
        </div> <!-- End main-content --> 
    </div> <!-- End page-wrap --> 
    <div class="push"></div>
</div> <!-- End wrapper --> 
<div class="footer">        
    <img src="Images/organicspahouston_logo.png" width="400" height="238" />
    <div class="bottom">
        <p>Copyright (c) 2008</p>
    </div>
</div>
</body>

with style.css

* {margin: 0;padding: 0;}
html { height: 100%; background:#B5A9A0 url(../Images/osh_pic_bg1.png) no-repeat;     background-size: 100%}
body { height: 100%; font: RomulC; font-size: 12px; color:#A39E95; text-align: center } 

article, aside, figure, footer, header, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display:    block; } /* close commented backslash hack */

.wrapper {
position: relative;
width: 800px;
margin: 0 auto -258px;
}

#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto; background:#000; position:relative;}

#main-content { float:right; width: 640px; margin: 10px 10px 10px 0px; -moz-border-  radius: 15px;
border-radius: 15px; background: #2D261C; position: relative; padding: 10px 0px 0px    0px; }

.footer {
position: relative;
width: 100%;
margin: 0 auto 0;
padding: 0;
text-align:center;
    height: 258px;
overflow:hidden;
}

.footer img {
position: relative;
width: 400px;
margin: 0 auto;
} 
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;
}

.bottom a {
color: #fff;
text-decoration: underline;
border: 0;
}

.bottom p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}


</html>

来自粘性页脚的

和layout.css

* {
margin: 0;
}
html, body {
height: 800px;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -258px; /* the bottom margin is the negative value of the footer's    height */
}
.footer {
height: 258px; /* .push must be the same height as .footer */
} 

.push {
height: 258px; /* .push must be the same height as .footer */
}

/*

@Samich为我提供了以下解决方案（加上帮助我清理了很多东西）。我正在添加保证金，但我不得不将它添加到两个方面，所以它来自：

#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto; background:#000; position:relative;}

到

#page-wrap { width:800px; -moz-border-radius: 15px;
border-radius: 15px; margin: 175px auto Opx; background:#000; position:relative;}

http://jsfiddle.net/kagawa_leah/c2N24/11/

0会有什么不同。

Answer 1

您需要将页脚的height和包装器的margin-bottom设置为相同的值。在你的情况下，它是4em.

http://jsfiddle.net/WqNEj/3/

<强> P.S。 http://jsfiddle.net/WqNEj/8/

我在页脚中设置overflow:hidden，因为它的高度为260px，大于页脚高度。

Answer 2

.push必须与页脚高度相同，但为负数：将.push设置为margin-bottom：-258px

页面太长（使用粘页脚）

2 个答案: