Отзывчивый слайдер выходит за пределы обертки

Question

У меня проблема с отзывчивым слайдером внутри обертки. Когда я изменяю размер окна браузера по вертикали (горизонтально настраивается на ширину обертки), оболочка меняет свои размеры, а ползунок выходит за его пределы. Я пытался решить это разными способами, но я не могу найти хорошее решение.

CSS

* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
} 

body { 
    margin: 0 !important; 
    font-family: 'Lato', sans-serif; 
    background-color: #fff; 
    color: #161616; 
} 

#wrapper { 
    position: fixed; 
    width: 90%; 
    height: 75%; 
    margin-top: 5%; 
    margin-left: 5%; 
    background-color: #f2f2f2; 
} 

.logo{ 
    position:absolute; 
    width: 100px; 
    height: 94px; 
    margin-top: -26px; 
    margin-left: 50px; 
    background-image: url('images/logo.png'); 
    background-image: no-repeat; 
} 

.nav { 
    float: right; 
    margin-top: 35px; 
    margin-right: 35px; 
} 

.nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

.nav ul li { 
    float: left; 
} 

.nav ul li a { 
    color: #161616; 
    /*font-family: Verdana;*/ 
    text-decoration: none; 
    font-size: 14px; 
    letter-spacing: 2px; 

} 

.nav ul li a:hover { 
    color: #cccccc; 
} 

.nav ul li:nth-child(n+2) { 
    margin-left: 23px; 
} 


img { 
    max-width: 100%; 
} 
.cycle-slideshow { 
    position:relative; 
    display:block; 
    width: 60%; 
    max-width: 960px; 
    margin: 90px 20%; 
    overflow:auto; 
} 

.cycle-prev, .cycle-next { 
    position: absolute; 
    display:block; 
    top: 37%; 
    font-size: 200%; 
    color: #161616; 
    cursor: pointer; 
    z-index: 9999; 
} 

.cycle-prev { 
    left: 0; 
} 

.cycle-next { 
    right: 0; 
} 

.footer{ 
    position:fixed; 
    padding: 38px 0; 
    left: 5%; 
    bottom: 0; 
    width: 90%; 
    height: 85px; 
    font-size: 12px; 
    text-align: center; 
    letter-spacing: 1px; 
} 

HTML

<div id="wrapper"> 
    <header> 
     <div class="logo"></div> 
     <div class="nav"> 
      <ul> 
       <li><a href="#">First</a></li> 
       <li><a href="#">Second</a></li> 
       <li><a href="#">Third</a></li> 
      </ul> 
     </div> 
    </header> 
    <div class="cycle-slideshow"> 
     <span class="cycle-prev">&#10092;</span> 
     <span class="cycle-next">&#10093;</span> 
     <img src="images/bg.png" alt="Robak" /> 
     <img src="images/bg2.png" alt="Robak" /> 
    </div> 
    <div class="footer">Footer info.</div> 
</div> 

Answer 1

Вы работаете JQuery цикла плагин? Вы хотите изменить размер слайд-шоу, чтобы избежать вертикальной прокрутки при изменении размера окна? Что не так, если разрешить прокрутку страницы при уменьшении вертикального пространства.

Edit: Попробуйте это ...

http://codepen.io/robotslater/pen/YyJNER

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    margin: 20px; 
 
    font-family: 'Lato', sans-serif; 
 
    background-color: #fff; 
 
    color: #161616; 
 
} 
 

 
#wrapper { 
 
    position: absolute; 
 
    left: 30px; 
 
    right: 30px; 
 
    top: 30px; 
 
    bottom: 30px; 
 
    background-color: #f2f2f2; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 94px; 
 
    margin-top: -26px; 
 
    margin-left: 50px; 
 
    background-image: url('images/logo.png'); 
 
    background-image: no-repeat; 
 
} 
 

 
.nav { 
 
    float: right; 
 
    margin-top: 35px; 
 
    margin-right: 35px; 
 
} 
 

 
.nav ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
.nav ul li { 
 
    float: left; 
 
} 
 

 
.nav ul li a { 
 
    color: #161616; 
 
    /*font-family: Verdana;*/ 
 
    
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    letter-spacing: 2px; 
 
} 
 

 
.nav ul li a:hover { 
 
    color: #cccccc; 
 
} 
 

 
.nav ul li:nth-child(n+2) { 
 
    margin-left: 23px; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
.cycle-slideshow { 
 
    position: absolute; 
 
    display: block; 
 
    top: 90px; 
 
    left: 20%; 
 
    right: 20%; 
 
    bottom: 30px; 
 
    overflow: auto; 
 
} 
 

 
.cycle-prev, 
 
.cycle-next { 
 
    position: absolute; 
 
    display: block; 
 
    top: 37%; 
 
    font-size: 200%; 
 
    color: #161616; 
 
    cursor: pointer; 
 
    z-index: 9999; 
 
} 
 

 
.cycle-prev { 
 
    left: 0; 
 
} 
 

 
.cycle-next { 
 
    right: 0; 
 
} 
 

 
.cycle-slideshow > div { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #eee; 
 
    background-size: auto 100%; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    position: absolute; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    letter-spacing: 1px; 
 
    line-height: 30px; 
 
    z-index: 9999999; 
 
}

<div id="wrapper"> 
 
    <header> 
 
    <div class="logo"></div> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li><a href="#">First</a></li> 
 
     <li><a href="#">Second</a></li> 
 
     <li><a href="#">Third</a></li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
    <div class="cycle-slideshow" data-cycle-slides="> div"> 
 
    <span class="cycle-prev">&#10092;</span> 
 
    <span class="cycle-next">&#10093;</span> 
 

 
    <div style="background-image:url(http://s3.freefoto.com/images/9912/01/9912_01_1095_web.jpg)"></div> 
 
    <div style="background-image:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg)"></div> 
 
    </div> 
 
    <div class="footer">Footer info.</div> 
 
</div>