使页脚在绝对布局中粘在底部

Question

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

我该如何解决这个问题？提前致谢！

Answer 1

只是一个快速的解决方案。

将 70px 的 padding-bottom 添加到您的 .pt-page 元素。