Question

所以我复制了一个javascript图片幻灯片，并将其放在section内的body标签中。当我去预览网站时，幻灯片的一部分位于<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

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

＆＃13;

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";
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

将下边距添加到等于页脚高度的部分

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

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

2 个答案: