我的目标：页面空白区域底部的中心页脚导航。
嘿伙计们，我正在尝试让我的页脚移动到页面底部。我正确显示了导航和图像，但页脚希望保持在顶部附近。
我之前遇到的麻烦是让导航显示在所有浏览器中徽标右侧的顶部，现在我已经修复了我只需要这个页脚保持在底部的中心。
这是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
...
</style>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" atl="Logo" class="logo" alt="Visit Medata Home Page">
</div>
<div id="nav">
<ul>
<li>NewsWorthy</li>
<li>Solutions</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="acton">
</div>
<div id="footer">
<ul>
<li>NewsWorthy</li>
<li>Solutions</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
</body>
</html>
这是 CSS
//!--My Custom CSS--!//
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow: hidden;
background-repeat: inherit;
z-index:-1;
padding-bottom: 25px;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
overflow: auto;
}
#main
{
margin: auto !important;
visibility: visible !important;
-webkit-border-radius: 5px !important;
-webkit-box-shadow: 0px 0px 20px #000 !important;
-webkit-box-sizing: content-box !important;
-moz-box-shadow: 0px 0px 20px #000 !important;
box-shadow: 0px 0px 20px #000 !important;
background-color: #fff;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#top-left {
float: left;
display: block;
}
#top-left img {
height: 73px;
width: 329px;
padding-left: 20px;
padding-top: 20px;
}
#nav {
margin: 0;
padding: auto;
}
#nav ul {
display: table-row;
float: right;
}
#nav li {
background: #043d70;
color: white !important;
padding: 8px 20px;
display: inline;
border-radius: 3px;
font-family: Tahoma, Geneva, sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
margin: 20px 8px 0px 0px;
text-align: center;
float: right;
}
#nav li:hover {
text-decoration: none;
background: #43434A;
}
#nav li a {
color: #fff;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
}
#main {
height: 100%;
}
#footer {
width: 100%;
height: 100%;
display: table-row;
}
#footer ul {
display: block;
position: absolute;
clear: both;
}
#footer li {
background: #043d70;
color: white !important;
padding: 8px 20px;
display: inline;
border-radius: 3px;
font-family: Tahoma, Geneva, sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 10px;
margin: 20px 8px 0px 0px;
text-align: center;
}
#footer li:hover {
text-decoration: none;
background: #43434A;
}
#footer li a {
color: #fff;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
}
//!--End My Custom CSS --! //
我认为这就是你想要的
http://jsfiddle.net/hsh5c/
#footer {
height: 50px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
}
#footer ul {
position:relative;
width: 400px;
margin-left:-200px;
left:50%;
}