1
嗨〜我在線製作一個藝術作品集，並且遇到了問題。我用粘性頁腳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>
與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提供我與下面的解決方案（加上幫我清理東西）。我加入保證金，但我不得不將其添加到兩側，以便從去BOTH：
#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品牌。
那提琴荒謬的。這只是一個空白的白色頁面，在視圖面板上只有一行文本。 –
你沒有選擇推動div，它的意思是與你的頁腳高度相同！ – Kyle
@Jarred Farrish你是對的！我的鏈接。 –