I've encountered variations of this question in the past, but I haven't found a solution that fits my specific needs. My challenge involves having a footer fixed at the bottom of a page, even when the content doesn't fill the entire page. Additionally, I aim to vertically align all the content on the page to the middle.
The current issue lies in the fact that the implementation of the footer seems to conflict with my vertical alignment method using vertical-align with display: table and table-cell. Here is how I currently have the footer set up:
<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 attempted various approaches, all involving min-height in the body. However, for proper vertical alignment, it's necessary for the child elements to utilize percentage heights, which isn't supported by min-height. Some suggestions involved using height: 1px in the body, but it behaves as if it has height: 100%, preventing the footer from moving correctly when the content exceeds the page size.
Although flexbox was mentioned as a potential solution, I'm hesitant to use it due to browser compatibility concerns. Any alternative suggestions would be greatly appreciated.