Question

我的目标： 中心页脚导航在页面底部的空白区域。

嘿伙计们，我正试图让我的页脚移动到页面底部。我有正确显示的导航和图像，但页脚想要保持在顶部附近。

我之前遇到的麻烦是导航显示在所有浏览器的徽标右上方，现在我已经修复了我只需要这个页脚保持在底部居中。

以下是代码：

<!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 --! //

Answer 1

我认为这就是你想要的

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

试图让我的页脚走到最底层

1 个答案: