将滑块固定到页面底部，与浏览器窗口大小无关

Question

我正在尝试将滑块设置在页面底部，因此如果有人要重新调整浏览器的大小，则不会强制用户滚动到页面底部以进行筛选通过图片我旋转通过全屏响应JQuery图像和内容滑块。我已尝试使用位置，溢出和边距调整来实现此目的，但似乎没有任何效果。我究竟做错了什么？

<div class= "container clearfix">
 <div id="r-slider-wrapper">
    <div id="r-slider-category-wrapper">
        <select>
            <option value="first-cat">First Category</option>
            <option value="second-cat">Second Category</option>
            <option value="third-cat">Third Category</option>
            <option value="fourth-cat">Fourth Category</option>
        </select>
        <ul>
            <li><a href="#first-cat">Islands</a> </li>
            <li><a href="#second-cat">South Africa</a> </li>
            <li><a href="#third-cat">North America</a> </li>
            <li><a href="#fourth-cat">Australia</a> </li>
        </ul>
        <div id="r-slider-content-right">
            <div id="r-nav">
                <img src="images/prev.png" id="r-prev" alt="Previous" />&nbsp;
                <img id="r-next" src="images/next.png" alt="Next" />
            </div>
        </div>
    </div>
    <div id="r-slider-contents-wrapper">
        <div id="r-slider-content-left">
            <div id="first-cat">
                <div class="r-img-wrap">
                    <img src="images/Hawaii1.jpg" />
                </div>
                 ---more pictures---
                <div class="clear">
                </div>
            </div>
            <div id="second-cat">
                <div class="r-img-wrap">
                    <img src="images/Africa1.jpg" />
                </div>
             ---more pictures----
                <div class="clear">
                </div>
            </div>
            <div id="third-cat">
                <div class="r-img-wrap">
                    <img src="images/NA1.jpg" />
                </div>
                ---more pictures---
                <div class="clear">
                </div>
            </div>
            <div id="fourth-cat">
                <div class="r-img-wrap">
                    <img src="images/Australia1.jpg" />
                </div>
               --- more pictures---
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
</div>

    

以下是CSS：

body {
padding: 0;     /* Gets rid of the automatic padding */
margin: 0;  /* on HTML documents                 */
font-family: Helvetica neue, Arial, Tahoma;
font-size: 16px;
background-color:white;
}

img {
display:block;
margin: auto;
}

#surfImage{
padding-top:30px;
width:100%;
text-align:center;
margin: auto;
}

#logo{
height:90px;
width:100%;
text-align:center;
margin:auto;
padding-bottom:10px;
background:white;
}

#navigation {
    position: fixed;
    top: 0;
    width: 100%;
    color: #ffffff;
    height: 35px;
    text-align: center;
    padding-top: 15px;
    /* Adds shadow to the bottom of the bar */
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    /* Adds the transparent background */
    background-color: rgba(1, 1, 1, 0.8);
    color: rgba(1, 1, 1, 0.8);
    z-index:100000;
    }

    #navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
 }

 #navigation a:hover {
color: grey;
 }

 .container{
width: 100%;
height: 100%;
  }

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0
}

* html .clearfix, *:first-child + html .clearfix { zoom:1 }

#r-slider-wrapper {
    margin: auto;
    height: 80px;
    position: absolute;
    z-index: 1000;
    padding-top:500px;
}

#r-slider-category-wrapper{
    float: left;
    height: 80px;
    margin: 0 5px;
    position: absolute;
    clear: both;
    bottom: 0px;
 }

#r-slider-category-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}

#r-slider-category-wrapper ul li {
    float: left;
}

#r-slider-category-wrapper ul li a {
    display: block;
    margin-left: 10px;
    text-decoration: none !important;
    padding: 29px 20px 30px;
    background: #fff;
    color: #545454;
}

#r-slider-category-wrapper ul li a:hover {
    background: #f9ed0d;
    color: #333;
}

.r-cat-active a {
    background-color: Yellow !important;
    color: Black !important;
    font-weight: bold !important;
}

.r-cat-active a {
    text-decoration: none !important;
}

#r-slider-content-left {
    display: block;
    float: left;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%;
}

#r-slider-content-right {
    margin-left: 10px;
    float: left;
    right: 0;
}

.r-img-wrap {
    position: absolute;
    width: 100%;
}

.r-img-wrap img {
    width: 100%;
    height: 100%;
}

.clear{
    clear: both;
}

#r-nav {
    width:100%;
}

#r-prev, #r-next {
    cursor: pointer;
    display: inline-block;
}

#r-slider-category-wrapper select {
    display: none;
}