Menu
Given a sticky footer such as that on Ryan Fait's site with a fixed pixel height, is it possible to center, both horizontally and vertically, variable-size content in the space above this footer?
609
Method 2: (fixed height footer) Apply display:flex and flex-direction:column to the body . Apply margin-top:auto the footer . You're done, because auto margins inside flex containers absorb all available free space, making the footer stick to the bottom.
To make a footer fixed at the bottom of the webpage, you could use position: fixed. < div id = "footer" >This is a footer. This stays at the bottom of the page.
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
I would suggest looking at Bobby van der Sluis's article on Footers at A List Apart.
Example #7 at the end of his article shows a vertically centered block. It does rely on scripting, but it is truly minimal.
edit You can also use a single-cell table to accomplish vertical centering. Incorporating it with Ryan Fait's sticky footer would give you something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#footer {
margin-top: -150px;
height: 150px;
}
#footer {
background: #bbd;
}
.block {
width: 300px;
padding: 20px;
background: yellow;
margin: 0 auto 150px; /* height of #footer */
}
</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div class="block">
<h1>Vertically Centered!</h1>
<p>This block will remain centered. Just needs that one table cell wrapping.</p>
</div>
</td></tr>
</table>
<div id="footer">Footer Content here</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
