試圖讓我的頁腳去底部

我的目標： 頁面上的空白底部的中心頁腳導航。試圖讓我的頁腳去底部

嘿傢伙我試圖讓我的頁腳移動到頁面的底部。我有導航和圖像正確顯示，但頁腳希望保持靠近頂部。

我之前遇到的麻煩是讓導航顯示在所有瀏覽器中徽標的右上方，現在我已經修復了我只需要該頁腳保持居中位於底部的信息。

下面是代碼：

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

來源

2014-02-14 Misterizzo

http://www.cssstickyfooter.com/ – dezman

向我們展示jsfiddle請 – Jatin

我想這是你想要的

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

來源

2014-02-14 00:14:54 user1534664

謝謝！我還沒有開始理解如何做這項工作。非常感激:) :) :) – Misterizzo

試圖讓我的頁腳去底部

回答

相關問題