0

我正在尝试将滑块设置在页面底部，因此如果有人要重新调整浏览器的大小，它不会强制用户滚动到页面底部以筛选图片我通过全屏响应 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;
}
4

0 回答 0