CODEWITHSUNDEEP
htmlcss
Cla
Cla

Reputation: 313

Make footer stick to bottom in absolute layout

I want the footer to stick to the bottom of the page without overlapping content if the page height is more than 100%. I don't know how to achieve that because i cannot change the following css that every page has becaus if i do the website don't work properly because of the transitions.

I know that setting position to relative would fix it, but thats not possible in my case.

Here is the css of the page: 

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

}

Now the footer is always on the bottom of the visible window, so it sometimes overlaps the content.

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

How can I resolve this problem? Thanks in advance!

Upvotes: 0

Views: 74

Answers (1)

Tejasva Dhyani
Tejasva Dhyani

Reputation: 1362

Just a quick solution.

Add padding-bottom of 70px to your .pt-page element.

Upvotes: 1

Related Questions