IosSlider 不允许在其下方添加内容

Question

我想在我的滑块下方添加内容（链接和文本），以便滑块占据屏幕的大部分，但您可以滚动查看其下方的内容。这是我的 html，滑块下方有一个示例 div：

<!-- Slider -->
<section id="slider" >

<div class="container-fluid">
    
   
    <div class = 'responsiveHeight'>
        
    
        <div class = 'inner'>
            
            
            <div class = 'iosSlider'>
                
            
                <div class = 'slider'>
                
                    
                    <img class="item selected" src="../images/Project/Education-Municipal/grandcayman/01 0614-23.1491.1503.jpg"/>
                    
                    
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/02 0614-23_1350.jpg"/>
                    
                    
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/03 0614-23_DSC2008.jpg"/>
                    
                    
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/04 0614-23_DSC2130.jpg"/>
                    
                    
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/05 0614-23_G3A1975crop2.jpg"/>
                    
                </div>
            
            </div>
            
        </div>
        <div class = 'prevButton'></div>
    
        <div class = 'nextButton'></div>
    
    </div>
    
</div> <!-- /.container -->
<div class = 'indicators'>
    <div class = 'item selected'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
</div>
</section>

这是我想要的滑块部分下方的示例内容：

<div class="container">
 <h2>Sample content I would like to appear below my slider if the user scrolls the page</h2></div>

这是我的 CSS 滑块：

#slider {
    position:absolute;
    top:120px;
    left:0px; 
    width:100%;
    color:#666;
    z-index:1;
  }
  .responsiveHeight {
            height: 0;
            padding: 0 0 34% 0; /* responsive slider height = 40% of the browser width --- moved to 35% for footer */
            position: relative;
            overflow:hidden;
        }
  .responsiveHeight > .inner {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .iosSlider {
            width: 100%;
            height: 100%;
        }
        .iosSlider .slider {
            width: 100%;
            height: 100%;
        }
        .iosSlider .slider img {
            float: left;
            height: 100%;
            padding-right:2px;
        }

我将#slider 从绝对定位更改为相对定位，但没有成功。我还尝试调整响应高度和超高的溢出。任何见解将不胜感激。谢谢

Answer 1

看来您可以通过将包装器 div 设置为固定高度来做到这一点。我使用 650px 的高度并将 div 包裹在滑块内容周围。有没有更优雅的方法来做到这一点？我将需要为每个设备调整我的高度，因此寻找更简单的解决方案。

IosSlider 不允许在其下方添加内容

IosSlider will not allow content to be added below it

html

css

slider

ios