推一个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到页面底部

回答

相关问题