Question

我在制作粘性页脚时遇到了麻烦，无论我做什么，代码完全混乱并重新安排其他元素的定位。我正在使用多个div元素。我已经尝试了大多数关于在线粘贴页脚的教程，例如http://www.cssstickyfooter.com/using-sticky-footer-code.html非常感谢帮助。非常感谢！

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;
}

Answer 1

我可能看不太正确，但你没有为#footer（style.css）添加任何CSS选择要将页脚粘贴到页面底部，那么非常简单

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

Answer 2

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

粘性页脚html css的问题

2 个答案: