我的照片幻灯片不与我的页脚合作。部分幻灯片显示在页脚后面，并且不会向下滚动

Question

因此，我复制了javascript图片幻灯片，并将其放在body内的section标记中。当我去预览网站时，幻灯片的一部分在我的<footer>后面，我无法查看它。它不会让我向下滚动查看图片幻灯片的其余部分。

我认为这是滚动条或身体的大小，我不知道。

我对HTML/CSS非常陌生，我的代码可能杂乱无章，有些部分冗余或不必要，所以任何建设性的批评也是受欢迎的。

这里是我的html：

<section> 
     <div class="container"> 
      <img class="mySlides" src="https://i.imgur.com/cWNxWqs.jpg?1" style="width:100%"> 
      <img class="mySlides" src="img_lights.jpg" style="width:100%"> 
      <img class="mySlides" src="img_mountains.jpg" style="width:100%"> 
      <img class="mySlides" src="img_forest.jpg" style="width:100%"> 
      <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button> 
      <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button> 
     </div> 
     <script> 
      var slideIndex = 1; 
      showDivs(slideIndex); 

      function plusDivs(n) { 
       showDivs(slideIndex += n); 
      } 

      function showDivs(n) { 
       var i; 
       var x = document.getElementsByClassName("mySlides"); 
       if (n > x.length) {slideIndex = 1}  
       if (n < 1) {slideIndex = x.length} 
       for (i = 0; i < x.length; i++) { 
       x[i].style.display = "none"; 
       } 
       x[slideIndex-1].style.display = "block"; 
      } 
     </script> 
    </section> 
</body> 
<footer> 
    <div class="container" style="clear: both"> 
     <ul> 
      <li style="list-style-type: none;">Contact Me</li> 
      <li style="list-style-type: none;">Connect with Me</li> 
     </ul> 
    </div> 
</footer> 

我的CSS：

footer{ 
    font: 15px/1.5 Times New Roman; 
    bottom:0; 
    width:100%; 
    padding:50px 0px; 
    background:#9360DB; 
    border-top:#6163d0 3px solid; 
    clear: both; 
    position: fixed; 
} 

footer ul{ 
    margin: 0; 
    padding: 0; 
} 

footer li{ 
    text-decoration: none; 
    float: left; 
    display: inline; 
    padding: 0 10px 10px 10px; 
    color: white; 

} 

section{ 
    width: 100%; 
    margin-bottom: auto; 
} 

Answer 1

添加底边距第等于页脚高度

section { 
    margin-bottom: 200px; //equal to footer height 
} 

Answer 2

我假设你要将页脚固定在窗口上。所以解决方法应该是将margin-bottom添加到section元素。边距底部应该具有相同的值或大于footer元素的高度。请参阅下面的代码片段。另请注意，我正在设置属性box-sizing:border-box，以便填充物包含在高度计算中。此外，页脚高度设置为height:135px。因此，节元素的margin-bottom设置为margin-bottom:150px。

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    if (n > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    if (n < 1) { 
 
    slideIndex = x.length 
 
    } 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
}

footer { 
 
    font: 15px/1.5 Times New Roman; 
 
    bottom: 0; 
 
    width: 100%; 
 
    padding: 50px 0px; 
 
    background: #9360DB; 
 
    border-top: #6163d0 3px solid; 
 
    clear: both; 
 
    position: fixed; 
 
} 
 

 
footer ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
footer li { 
 
    text-decoration: none; 
 
    float: left; 
 
    display: inline; 
 
    padding: 0 10px 10px 10px; 
 
    color: white; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    margin-bottom: 150px; 
 
}

<section> 
 
    <div class="container"> 
 
    <img class="mySlides" src="https://i.imgur.com/cWNxWqs.jpg?1" style="width:100%"> 
 
    <img class="mySlides" src="img_lights.jpg" style="width:100%"> 
 
    <img class="mySlides" src="img_mountains.jpg" style="width:100%"> 
 
    <img class="mySlides" src="img_forest.jpg" style="width:100%"> 
 
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button> 
 
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button> 
 
    </div> 
 
</section> 
 
<footer> 
 
    <div class="container" style="clear: both"> 
 
    <ul> 
 
     <li style="list-style-type: none;">Contact Me</li> 
 
     <li style="list-style-type: none;">Connect with Me</li> 
 
    </ul> 
 
    </div> 
 
</footer>