私の写真のスライドショーは私のフッターと協力していません。スライドショーの一部がフッタの後ろにあり、スクロールしません

Question

私はjavascript画像のスライドショーをコピーし、の中の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

フッターの高さに等しいセクションに下の余白を追加します。フッターをウィンドウに固定したい。そのため、解決策は、をsection要素に追加することです。 margin-bottomは、同じ値を持つか、またはfooter要素の高さよりも大きくなければなりません。以下のスニペットを参照してください。また、高さの計算にパディングが含まれるようにプロパティbox-sizing:border-boxを設定しています。また、フッターの高さはheight:135pxに設定されています。したがって、section要素の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>