将页脚粘贴到绝对布局的底部

如果页面高度超过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

将页脚粘贴到绝对布局的底部

回答

相关问题