Problem Aligning Footer

Question

Problem Aligning Footer

Navigation

#1 by (1 votes)

1

Hello, I have a problem that is disturbing for a long time, I have a page where there is a div whose has several contents inside that modify according to the user's desire, just below there is a Footer

If I put a position: relative , the footer will adjust its position according to the size of the page, but it will not be "stuck" down (no space until the end gives page) if the monitor height change Even if I put a position: absolute the footer will be fixed at the bottom of the page, but it will not fit the window size. So I do not know how to "merge" the two required settings.

My example is here .

Thank you.

html css css3

asked by anonymous 31.08.2014 / 01:17

1 answer

Resolve apport-GTK, dkpg, and Git related errors JPA with the Java 8 Date API

score 1 · Answer 1

Well, I do not know if it's the best alternative, but the solution I found was this:

<body>
  <style>
  * {
    margin: 0;
  }
  html, body {
    height: 100%;
  }
  .page {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
  }
  .rodape, .push {
    height: 4em;
  }

  .rodape { 
      background: #3C948B;
  }
  </style>

  <div class="page">
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>

      <div class="push"></div>
  </div>
  <div class="rodape">
        <p style="vertical-align: middle; position: relative; top: 28px; margin-left: 20px;
         color: rgb(255, 255, 255)" >TechSmart&copy; WebResolution&reg; - 2014</p>
  </div>
</body>

See that the <div class="push"> function is just to push your footer when the content is not large enough to scroll the page.

From this example you can adapt according to your needs.

If someone wants to check the source of the response, follow the link .