Problem when aligning Footer

Asked

Viewed 299 times

1

Hello, I have a problem that is disturbing for a long time, I have a page on which there is a div which has several contents inside which are modified according to the user’s wish, below there is a Footer.

In case I put one position: relative, the footer will adjust its position according to the size of the page, but it does not get "stuck" at the bottom (with no space until the end of the page) if the height of the monitor changes. In case I put one position: absolute the footer will stay fixed at the bottom of the page, but will not fit the window size. So I don’t know how to "merge" the two necessary settings.

My example is here.

Thank you.

html css css3

  • You want it to get stuck when the user scrolls down?

  • Ever tried to put position: fixed?

  • If what I understand, only use position:Fixed; bottom:0

  • Maybe I didn’t express myself well, I don’t wish the footer was with a position: fixed, yes with a position: relative or with a position: absolute, the problem lies in its primitive characteristics, in the case of the position: relative it will change its position (its location, not its position css) according to the size of the elements that are located before it, but I can’t find a way to put a bottom: 0px similar to what happens if I apply a position: absolute. Does anyone know how it would be possible to do that?

  • I swear I tried to understand, but I still can’t make it clear. You want your footer div to bottom: 0px when the content is not big enough to pop the page, and always leave below the div "page" when the content of this div burst the size of the page? Would it be like the bootstrap 3 "footer" class? Have you seen the example of bootstrap?

  • @Adrianoleal, from what I saw I think you understand, but I still can’t solve.

  • @Samirbraga I could not continue my tests but as soon as I get put here. See that also I never did this, hahaha, but understanding your idea I will try to help. =)

Show 2 more comments

1 answer

1

Well, I don’t 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 function of <div class="push"> is just push your footer when the content is not large enough to have scroll on the page.

From this example you can adapt according to your needs.

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

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.