響應式幻燈片和頁腳定位

Question

好吧，讓我的頁腳正常工作，直到我安裝了responsiveslides。它位於頁面的底部，位置：絕對的，不固定的，但是現在它停留在頁面中間，在它的下面有空白區域。 我知道這個位置：absolute使它保持在最後一個被錨定的元素下，但我不明白它爲什麼不能在div之後站立，它只是在幻燈片放映之下。

代碼片段演示：

.slideshow-container { 
 
    clear: both; 
 
    max-width: 100%; 
 
    position: relative; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    z-index: 80; 
 
} 
 

 
.rslides { 
 
    position: relative; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.rslides li { 
 
     -webkit-backface-visibility: hidden; 
 
     position: relative; 
 
     display: none; 
 
     width: 100%; 
 
     left: 0; 
 
     top: 0; 
 
} 
 

 
.rslides li:first-child { 
 
      position: relative; 
 
      display: block; 
 
      float: left; 
 
} 
 

 
.rslides img { 
 
     display: block; 
 
     height: auto; 
 
     float: left; 
 
     width: 100%; 
 
     border: 0; 
 
} 
 

 
#continut { 
 
    height: 1000px; 
 
} 
 

 
#footer { 
 
    clear:both; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #F28A00; 
 
} 
 

 
#footer ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1.041vw;  
 
} 
 

 
#footer li { 
 
     font-size: 0.9vw; 
 
     font-weight:normal; 
 
     display: inline; 
 
     margin-left: 2.604vw; 
 
     padding-right: 0.78125vw; 
 
     padding-bottom: 0.263vw; 
 
}

<div class="slideshow-container"> 
 

 
      <ul class="rslides"> 
 
       <li><img src="img/img1.jpg" alt=""></li> 
 
       <li><img src="img/img2.jpg" alt=""></li> 
 
       <li><img src="img/img3.jpg" alt=""></li> 
 
      </ul> 
 
      <script src="js/sshow.js"></script> 
 
     </div> 
 
      <div id="continut"></div> 
 
      <div id="continut2"></div> 
 
      <div id="continut3"></div> 
 
      <footer id="footer"> 
 
       <ul> 
 
        <li id="nume">x</li> 
 
        <li class="copyright">Copyright Ⓒ 2017</li> 
 
       </ul> 
 
      </footer>  
 
      </div>

Answer 1

只是刪除bottom:0在#footer的jsfiddle。一切工作正常即可。

Answer 2

變化absolute到#footerinherit，你可能想要刪除bottom: 0;

.slideshow-container { 
 
    clear: both; 
 
    max-width: 100%; 
 
    position: relative; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    z-index: 80; 
 
} 
 

 
.rslides { 
 
    position: relative; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.rslides li { 
 
     -webkit-backface-visibility: hidden; 
 
     position: relative; 
 
     display: none; 
 
     width: 100%; 
 
     left: 0; 
 
     top: 0; 
 
} 
 

 
.rslides li:first-child { 
 
      position: relative; 
 
      display: block; 
 
      float: left; 
 
} 
 

 
.rslides img { 
 
     display: block; 
 
     height: auto; 
 
     float: left; 
 
     width: 100%; 
 
     border: 0; 
 
} 
 

 
#continut { 
 
    height: 1000px; 
 
} 
 

 
#footer { 
 
    clear:both; 
 
    position: inherit; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: #F28A00; 
 
} 
 

 
#footer ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1.041vw;  
 
} 
 

 
#footer li { 
 
     font-size: 0.9vw; 
 
     font-weight:normal; 
 
     display: inline; 
 
     margin-left: 2.604vw; 
 
     padding-right: 0.78125vw; 
 
     padding-bottom: 0.263vw; 
 
}

<div class="slideshow-container"> 
 

 
      <ul class="rslides"> 
 
       <li><img src="img/img1.jpg" alt=""></li> 
 
       <li><img src="img/img2.jpg" alt=""></li> 
 
       <li><img src="img/img3.jpg" alt=""></li> 
 
      </ul> 
 
      <script src="js/sshow.js"></script> 
 
     </div> 
 
      <div id="continut"></div> 
 
      <div id="continut2"></div> 
 
      <div id="continut3"></div> 
 
      <footer id="footer"> 
 
       <ul> 
 
        <li id="nume">x</li> 
 
        <li class="copyright">Copyright Ⓒ 2017</li> 
 
       </ul> 
 
      </footer>  
 
      </div>

Answer 3

簡單的方法：設置爲：body{position: relative;}。 第二種方式： 你可以用你的頁腳與位置的另一要素：相對：

.slideshow-container { 
 
    clear: both; 
 
    max-width: 100%; 
 
    position: relative; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    z-index: 80; 
 
} 
 

 
.rslides { 
 
    position: relative; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.rslides li { 
 
     -webkit-backface-visibility: hidden; 
 
     position: relative; 
 
     display: none; 
 
     width: 100%; 
 
     left: 0; 
 
     top: 0; 
 
} 
 

 
.rslides li:first-child { 
 
      position: relative; 
 
      display: block; 
 
      float: left; 
 
} 
 

 
.rslides img { 
 
     display: block; 
 
     height: auto; 
 
     float: left; 
 
     width: 100%; 
 
     border: 0; 
 
} 
 

 
#continut { 
 
    height: 1000px; 
 
} 
 

 
#footer { 
 
    clear:both; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #F28A00; 
 
} 
 

 
#footer ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1.041vw;  
 
} 
 

 
#footer li { 
 
     font-size: 0.9vw; 
 
     font-weight:normal; 
 
     display: inline; 
 
     margin-left: 2.604vw; 
 
     padding-right: 0.78125vw; 
 
     padding-bottom: 0.263vw; 
 
}

<div class="slideshow-container"> 
 

 
      <ul class="rslides"> 
 
       <li><img src="img/img1.jpg" alt=""></li> 
 
       <li><img src="img/img2.jpg" alt=""></li> 
 
       <li><img src="img/img3.jpg" alt=""></li> 
 
      </ul> 
 
      <script src="js/sshow.js"></script> 
 
     </div> 
 
      <div id="continut"></div> 
 
      <div id="continut2"></div> 
 
      <div id="continut3"></div> 
 
      <div style='position:relative'><footer id="footer"> 
 
       <ul> 
 
        <li id="nume">x</li> 
 
        <li class="copyright">Copyright Ⓒ 2017</li> 
 
       </ul> 
 
      </footer>  
 
      </div> 
 
      </div>