我的照片幻燈片不與我的頁腳合作。部分幻燈片顯示在頁腳後面，並且不會向下滾動

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>