將頁腳粘貼到絕對佈局的底部

如果頁面高度超過100％，我希望頁腳粘貼到頁面的底部而不重疊內容。我不知道如何實現這一點，因爲我不能改變以下每個頁面的CSS，因爲如果我做的網站由於轉換無法正常工作。將頁腳粘貼到絕對佈局的底部

我知道將位置設置爲relative可以修復它，但這在我的情況下是不可能的。

這裏是頁面的CSS：

.pt-page { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    visibility: hidden; 
    overflow-y: auto; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

#footer{ 
    height: 70px; 
    width: 100%; 
    margin-top: 500px; 
    position: absolute; 
    bottom: 0; 
    z-index: 1; 
} 

.pt-wrapper { 
position: relative; 
width: 100%; 
height: 100%; 
-webkit-perspective: 1200px; 
-moz-perspective: 1200px; 
perspective: 1200px;

}

現在頁腳總是在可視窗口的底部，所以它有時重疊的內容。

和HTML：

<!-- Page Wrapper --> 
    <div class="pt-wrapper"> 

    <!-- Page 01 --> 
    <div class="pt-page pt-page-01"> 
     <!-- content container --> 
     <div class="container"> 
      <!-- row with 1 columns --> 
      <div class="row"> 
       <div class="col-sm-12 center"> 
       <h1>¡Bienvenido a tu Nueva Web!</h1> 
       <img class="margin-top img-p-01" src="img/36.svg" width="36%" height="36%" alt=""> 
       <p class="margin-top">La unión perfecta: tu logo, tu dominio, nuestra plataforma!<br> 
       Flats2Share esta disponible como software de marca blanca, únicamente para tus propiedades y tus clientes. 
       </p> 
       </div> 
      </div> 
     </div> 
    </div> 

    <!-- Footer --> 
    <div id="footer"> 
    <div class="container"> 
     <div class="row center"> 
     <div class="col-sm-12"> 
      <img class="pt-trigger btn-prev" src="img/back.svg" data-animation="1-45-31-2-42-18-34-53-4-52-19-50-7-48-21-11-65-29-6-66-24-52-58-41-62-65-29-36-2-23-21-10-67-46-1-19-41-56-62" data-goto="-2"> 
      <img class="pt-trigger btn-next" src="img/forward.svg" data-animation="1-45-31-2-42-18-34-53-4-52-19-50-7-48-21-11-65-29-6-66-24-52-58-41-62-65-29-36-2-23-21-10-67-46-1-19-41-56-62" data-goto="-1"> 
     </div> 
     </div> 
    </div> 
    </div> 

</div>

我怎樣才能解決這個問題呢？提前致謝！

來源

2017-05-26 Cla

向您展示html代碼，如果您創建代碼片段或jsfiddle，它會很好。 –

我更新了問題 – Cla

只是一個快速解決方案。

將70px的填充底部添加到.pt-page元素中。

來源

2017-05-26 12:32:04

我已經試過這個了，但是這不會將頁腳推到底部。只有當你向下滾動到頁面底部時，內容和頁腳之間有70px的空間。 – Cla

所以你可以做的一件事就是在你的.pt-page元素中創建一個包裝器，並將所有其他內容放入其中。然後給70 px的包裝填充底部。 –

非常讚賞你！這解決了！ – Cla

將頁腳粘貼到絕對佈局的底部

回答

相關問題