내 그림 슬라이드 쇼가 내 바닥 글과 협조하지 않습니다. 슬라이드 쇼의 일부가 바닥 글 뒤에 있으며 스크롤하지 않습니다.

Question

그래서 자바 스크립트 그림 슬라이드 쇼를 복사하여 안에있는 section 태그에 넣었습니다. 사이트 미리보기로 이동하면 슬라이드 쇼의 일부가 내 <footer> 뒤에 있으며 볼 수 없습니다. 나머지 슬라이드 쇼를보기 위해 아래로 스크롤하는 것을 허용하지 않습니다.

스크롤 막대 또는 몸체의 크기가 있다고 생각합니다. 확실하지 않습니다.

저는 HTML/CSS에 매우 익숙하며 일부 코드가 복잡하거나 불필요하므로 건설적인 비평을 환영합니다.

<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 : 여기

내 HTML입니다

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을 추가하는 것이 해결책입니다. 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>