Question

我有一个实现nivoslider的页面，但我有两个问题。

Nivoslider将显示大图像，但我需要根据用户屏幕调整大小，我总是尝试最大宽度和最大高度但不起作用
当转换开始时，nivoslider会显示已加载图像的克隆，但此图像始终位于页面顶部，因此它会覆盖所有内容（div，nav，images）。

这是我的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*/
}

Answer 1

有一个简单的解决方案。就这样做：

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

注意：使用“important”，以便它取代溢出值可能已有的任何值。

nivo滑块在转换时重叠div

1 个答案: