个人中心
gpt4 book ai didi

html - 粘性页脚 html css 的问题

转载 作者：行者123 更新时间：2023-11-28 13:32:05 25 4
gpt4 key购买 nike

我在制作粘性页脚时遇到了问题，无论我做什么，代码都会完全困惑并重新安排其他元素的位置。我正在使用多个 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>

样式.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;}

导航.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;
}

最佳答案

我可能看得不正确，但您没有为#footer (style.css) 选择任何 CSS把页脚贴在页面底部，怎么样，很简单

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

关于html - 粘性页脚 html css 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13442283/

25 4 0
文章推荐： html - 如何设置文本框向左对齐？
文章推荐： html - CSS 菜单项在悬停时消失
文章推荐： html - 两个图像相对的 Z-index
文章推荐： javascript - 带有“确定”和“取消”按钮的 jquery 对话框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com