2014-12-02 71 views
0

我有一个页面,实现nivoslider,但我有两个问题。nivo滑块重叠divs而过渡

  1. Nivoslider将呈现大幅的图片,但我需要他们根据用户的屏幕大小,我一直tryied最大宽度和最大高度,但不工作

  2. 当过渡nivoslider开始显示已加载图像的克隆,但此图像始终位于页面的顶部,因此它与所有内容(div,nav,图像)重叠。

这里是我的CSS和HTML

HTML:

<header>something</header> 
<div id="contenido"> 
<div id="body_section" style="display: block !important; width: 100% !important; height: 100% !important;" > 

    <div class="slider-wrapper theme-default" style="position: static; z-index: 0 !important; "> 
     <div id="slider" class="nivoSlider slider_personalizado"> 
      <img src="index_images/slider/slide1.png" height="200" /> 
      <img src="index_images/slider/slide2.png" height="200" /> 
      <img src="index_images/slider/slide3.png" height="200" /> 
      <img src="index_images/slider/slide4.png" height="200" /> 
      <img src="index_images/slider/slide5.png" height="200" /> 
      <img src="index_images/slider/slide6.png" height="200" /> 
     </div> 
    </div> 
</div> 
<footer>something</footer> 

CSS:

body{ 
    margin: 0 auto; 
    overflow-y: hidden; 

} 

header{ 
    width: 100%; 
    height: 53px; 
    position: fixed; 
    z-index: 0; 
    background-color: #f0f0f0; 
} 

footer{ 
    clear:both; 
    background-color: #f0f0f0; 
    width: 100%; 
    height: 48px; 
    position:fixed; 
    bottom:0; 
    left:0; 
    color:#2e2e2e !important; 
} 



.slider_personalizado{ 
    z-index: 0 !important; 
    position: static !important; 

} 

#body_section{ 
    display: block; 
    position: static; 
    margin-top: 53px; 
    height: -moz-calc(100% - 101px); /* Firefox */ 
    height: -webkit-calc(100% - 101px); /* Chrome, Safari */ 
    height: calc(100% - 101px); /* IE9+ CSS3*/ 
    top:53px; 
    left:0px; 
    right:0px; 
    bottom:48px; 
    width:100%; 
    float:left; 
    clear:both; 
    z-index:0; 
} 

修改NIVO-slider.css

.nivoSlider { 
    position:relative; 
    width:100%; 
    height:auto; 
    overflow: hidden; 
     z-index:-99 
} 
.nivoSlider img { 
    position:static; 
    top:53px; 
     bottom: 48px; 
    left:0px; 
    max-width: none; 

     max-height: -moz-calc(100% - 101px); /* Firefox */ 
     max-height: -webkit-calc(100% - 101px); /* Chrome, Safari */ 
     max-height: calc(100% - 101px); /* IE9+ CSS3*/ 
} 

回答

1

有一个简单的解决方案。只是这样做:

#div-that-it-overlaps { 
    overflow: hidden!important; 
} 

注:使用“重要”,以便它取代任何值溢出值可能已经拥有。