粘性頁腳問題html css

我無法制作粘性頁腳，無論我做的代碼是否完全混亂並重新排列其他元素的位置。我使用多個div元素。我已經嘗試了很多大多數關於在線粘貼頁腳的教程，比如http://www.cssstickyfooter.com/using-sticky-footer-code.html幫助將非常感謝。非常感謝！粘性頁腳問題html css

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org"> 
<title>Southend-on-Sea Independant Tourist Guide</title> 
<!--Attached CSS to keep constant throughout site--> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<meta name="description" content="An independant tourist guide on Southend-on-Sea"> 
<meta name="keywords" content="southend, southend-on-sea, tourist guide, tourist, independant"> 
<meta name="author" content="Callum Stevens"> 
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"><!--[if !IE 7]> 
     <style type="text/css"> 
       #wrap {display:table;height:100%} 
     </style> 
<![endif]--> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<link rel="stylesheet" type="text/css" href="navigation.css"> 
</head> 
<body> 
<div id="container"> 
<div id="content"> 
<div id="header"> 
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td><img src="southendpiersept2006edit.jpg" width="700" height="389" alt="southend pier site logo"></td> 
</tr> 
</table> 
</div> 
<div id="navigation"> 
<ul> 
<li class="home"><a href="index.htm">Home</a></li> 
<li class="places"><a href="places.htm">Places to go</a></li> 
<li class="things"><a href="things.htm">Things to do</a></li> 
<li class="where"><a href="where.htm">Where to stay</a></li> 
<li class="getting"><a href="getting.htm">Getting&lt; here/a&gt;</a></li> 
<li class="about"><a href="getting.htm"></a><a href="getting.htm"></a><a href="about.htm">About the town</a></li> 
<li class="contact"><a href="contact.htm">Contact us</a></li> 
</ul> 
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td></td> 
</tr> 
</table> 
</div> 
<br> 
<br> 
<h1>Southend-On-Sea</h1> 
<br> 
<h2>Welcome to Southend-On-Sea Tourist Information Site. You're #1 stop for finding out about Southend!</h2> 
<br> 
<h3>This site aims to help you in getting here, finding accomodation, and letting you know whats going on.</h3> 
<p>paragraph</p> 
<p id="p2">paragraph2</p> 
</div> 
</div> 
<div id="footer"></div> 
</body> 
</html>

的style.css：

html, body { margin: 0px; 
      padding: 0px; 
text-align:center 
} 


body{ 
background: url(bg.jpg) repeat-x;} 

#content { 
    text-align:center 
    width:67%; 
} 

h2 { 
text-transform: capitalize;}

navigation.css

#navigation ul { 
    width: 700px; 
    height: 50px; 
    position: absolute; /** Places image at the top of the page **/ 
    top: 389px; /** Determines the height from the top of the page **/ 
    left: 15.3%; /** Determines the width from the left of the page **/ 
    background: url(menu.jpg) no-repeat 0 0; 
    list-style: none; 
    margin: 0; padding: 0; 
} 
#navigation li { 
    display: inline; 
} 
#navigation li a:link, #navigation li a:visited { 
    border: none; 
    width: 100px; 
    height: 50px; 
    display: block; 
    position: absolute; 
    top: 0; 
    text-indent: -7000px; 
    outline: none; 
} 
#navigation li.home a:link, #navigation li.home a:visited { 
    left: 0; 
} 
#navigation li.places a:link, #navigation li.places a:visited { 
    left: 100px 
} 
#navigation li.things a:link, #navigation li.things a:visited { 
    left: 200px 
} 
#navigation li.where a:link, #navigation li.where a:visited { 
    left: 300px 
} 
#navigation li.getting a:link, #navigation li.getting a:visited { 
    left: 400px 
} 
#navigation li.about a:link, #navigation li.about a:visited { 
    left: 500px 
} 
#navigation li.contact a:link, #navigation li.contact a:visited { 
    left: 600px 
} 

#navigation li.home a:hover { 
    background: url(menu.jpg) no-repeat 0 -50px; 
} 
#navigation li.places a:hover { 
    background: url(menu.jpg) no-repeat -100px -50px; 
} 
#navigation li.things a:hover { 
    background: url(menu.jpg) no-repeat -200px -50px; 
} 
#navigation li.where a:hover { 
    background: url(menu.jpg) no-repeat -300px -50px; 
} 
#navigation li.getting a:hover { 
    background: url(menu.jpg) no-repeat -400px -50px; 
} 
#navigation li.about a:hover { 
    background: url(menu.jpg) no-repeat -500px -50px; 
} 
#navigation li.contact a:hover { 
    background: url(menu.jpg) no-repeat -600px -50px; 
}

來源

2012-11-18 CJava

有沒有什麼可以暫時上傳這個到web服務器（非公開任何方式），所以我們可以更容易地檢查此代碼的結果？ –

或者你可以製作一個[小提琴]（http://jsfiddle.net/）的一樣嗎？ –

對不起，我不熟悉小提琴，你可以複製代碼？ – CJava

我可能看不到正確，但你還沒有把任何CSS選擇了＃頁腳（style.css）要將頁腳粘貼到頁面的底部，那麼非常簡單的

#footer { 
    position:fixed; 
    bottom: 0; 
    left:0; 
    right:0; 
    background-color:#ddd; 
}

來源

2012-11-18 17:00:34

，它使它保持在一個固定的位置，所以如果你滾動，那麼頁腳仍然在那裏，而不是在你向下滾動頁面的底部。 – CJava

好的，如果我理解，當頁面內容太短時，您希望頁腳粘貼到視口的底部，對嗎？ –

是這就是我需要:)謝謝 – CJava

工作JS提琴：http://jsfiddle.net/eQMmk/

相關的部分是在CSS的結尾：

/* sticky footer */ 
html, body { width: 100%; height: 100%; } 
#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -150px; 
} 
#footer { 
margin-top: -150px; 
height: 150px; 
width: 100%; 
background-color: red; 
}

來源

2012-11-18 17:14:55

該代碼使頁腳在我的2段以上，任何想法如何阻止發生？ – CJava

向包含頁腳上方內容的div或block元素添加一個「padding-bottom：150px;」。 –

粘性頁腳問題html css

回答

相關問題