CODEWITHSUNDEEP
htmlcss
stripies
stripies

Reputation: 302

Vertically aligning page content with a footer

Variations or parts of this question have been asked before but I haven't been able to find anything that works for what I'm trying to accomplish. I have a footer at the bottom of the page, even if the page content doesn't take up the entire page, and the footer will be at the end of the scrollable page if the content is bigger than the page. I also want to vertically align the entire page content to the middle.

The problem is that the way I have the footer implemented seemingly makes the way I was vertically aligning impossible. The vertical alignment is using vertical-align with display: table and table-cell Here is my current implementation of the footer.

<html>
  <body>
    <!-- page content -->
    <footer>
      <!-- footer content -->
    </footer>
  </body>
</html>

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
}

I've tried implementing it a few different ways but they all rely on min-height in body. To vertically align in the middle, it requires taking up the entire height of the content but min-height doesn't allow child elements to use percentage heights. I saw some suggestions of using height: 1px in body as well but it makes it function like it has height: 100% and so the footer won't properly move if the page content is larger than the page.

One other suggestion I've seen is using flexbox, however I haven't tried it as I'm trying to support as many browsers as possible. Any other suggestions would be appreciated.

Upvotes: 1

Views: 248

Answers (1)

Riunge Maina
Riunge Maina

Reputation: 542

to centre the content of the page this is what you will need; HTMl:

<html>
  <body>
    <div class='page-content'>
    <!-- page content -->
     </div>
    <footer>
      <!-- footer content -->
    </footer>
  </body>
</html>

CSS:

body {
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
}

.page-content {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
 }

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
}

It's the best you can do without flexbox; important to also note that the content will be in the true centre of the page, not the (page height) - (footer height) centre.

Upvotes: 2

Related Questions