推一個div到頁面底部

我不能爲我的生活弄清楚爲什麼div「book_button」不會顯示在頁面底部，頁腳上方。我有一個主包裝div，然後有一個內容div。我已將book_button放置在內容div之外的相對位置。在夢想編織者設計窗口中，它展示了我想要的地方。當我在瀏覽器中查看它diplays像這樣推一個div到頁面底部

http://kerrydean.ca/GreyRiver/fly_fishing.html

這裏是CSS

#Wrapper { 
    margin-top:0; 
    margin-right: auto; 
    margin-left: auto; 
    position: relative; 
    background-color: #ebebeb; 
    padding: 0px; 
    width: 100%; 
    top: 75px; 
} 
#Header { 
    background-color: #b2b85c; 
    height: 75px; 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    overflow: hidden; 
    z-index: 999; 
    border-bottom-width: 3px; 
    border-bottom-style: solid; 
    border-bottom-color: #FFF; 
} 
#Content { 
    width: 900px; 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
} 
#Left_Side { 
    padding: 10px; 
    width: 485px; 
    clear: left; 
    float: left; 
} 
#Right_Side { 
    width: 340px; 
    position: relative; 
    display: inline; 
    float: right; 
    margin-left: 20px; 
    margin-bottom: 10px; 
    padding-left: 35px; 
    height: 100%; 
} 
#Footer { 
    background-color: #BCC271; 
    height: 15px; 
    width: 100%; 
    text-align: center; 
    padding-top: 15px; 
    padding-bottom: 10px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FFF; 
    float: left; 
    position: relative; 
} 
/* Navigation*/ 
.nav-wrap { 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
    width: 900px; 
    padding-left: 15px; 
    padding-top: 31px; 
} 
ul#navlist 
{ 
    margin-left: 0; 
    padding-left: 0; 
    white-space: nowrap; 
} 

#navlist li 
{ 
    display: inline; 
    list-style-type: none; 
} 

#navlist a { 
    font-family: "Times New Roman", Times, serif; 
    font-size: 18px; 
    padding-top: 3px; 
    padding-right: 20px; 
    padding-bottom: 8px; 
    padding-left: 20px; 
} 

#navlist a:link, #navlist a:visited 
{ 
    color: #fff; 
    background-color: #b2b85c; 
    text-decoration: none; 
    border-left-width: 1px; 
    border-left-style: dotted; 
    border-left-color: #FFF; 
} 

#navlist a:hover 
{ 
    color: #fff; 
    background-color: #b2b85c; 
    text-decoration: none; 
    background-image: url(../GreyRiver/Images/pointer.jpg); 
    background-repeat: no-repeat; 
    background-position: 50% bottom; 
} 
.border-none{ 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none;  
    } 
/*End of Navigation*/ 
#header_img{ 
    height: 250px; 
    width: 900px; 
    position: relative; 
    background-image: url(../GreyRiver/Images/Fly_fishing_header.jpg); 
    margin-top: 10px; 
    margin-bottom: 25px; 
} 
#book_button{ 
    position: relative; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    text-align: center; 
}

我想通了。

我把book_button div放在頁腳之前。我做了100％的寬度，位置：相對，並添加一個浮動：左

謝謝！

來源

2011-11-30 Greg

看看你的來源，你有#book_button絕對不是相對的位置。 – Boone

1）請#wrapper指定position:relative

2）使#book_button position:absolute，設置bottom:40px;right:200px;

來源

2011-11-30 19:41:25

謝謝，但它不是答案 – Greg

這可能只是調整位置值的問題。 –

絕對位置將從瀏覽器窗口底部開始執行40px，而不是頁面上的內容。 – Boone

這可能不是最好的做法，但你可以使用top樣式屬性按下按鈕下來，你想要它。它看起來像你的頁面內容是靜態的，這意味着每次頁面加載時，按鈕不需要動態定位。所以，定位它的硬編碼值可能適用於您。

來源

2011-11-30 19:46:04 Ian

@Diodeus的答案可能會更好 - 但是，硬編碼在你的情況下的立場可能是要走的路。 – Ian

也非常感謝。但是這個選項也不適用於我。我不明白爲什麼內容div不直接在它下面強制book_button div。它仍然在包裝內？我很困惑 – Greg

我把你當前的視圖源，只是改變了#book_button回到相對，它顯示在頁腳和內容之間。將它改回相對值絕對不起作用。

來源

2011-11-30 20:42:06 Boone

推一個div到頁面底部

回答

相關問題