Archived topic
Footer to be at the bottom (not position:fixed)
7 replies · Started by Daniel on July 27, 2019
Hi GeneratePress community!
Was wondering if there is any way to achieve the "footer always displayed at the bottom" with GP?
The codes that should work are:
HTML
<html>
<body>
<div class="site">
<header></header>
<div class="site-content"></div>
<footer></footer>
</div>
</body>
</html>
CSS using flexbox
.site {
height: 100vh;
display: flex !important;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.site-content {
flex: 1; /* required for the content area to fill, pushing footer to always be at the bottom */
}
As GP uses:
HTML
<html>
<body>
<header></header>
<div class="site">
<div class="site-content"></div>
</div>
<footer></footer>
</body>
</html>
CSS using flexbox
body {
height: 100vh;
display: flex !important;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.site {
flex: 1; /* required for the content area to fill, pushing footer to always be at the bottom */
}
Changing .site to the body, and .site-content to .site kind of "broke" the site.
Is there any known way to force the footer to show up on the bottom? Use case: 404 pages or pages with incredibly short content that couldn't fill the content area of the page.
Thank you so much fam!
Hi there,
Can you try this CSS?
@media (min-width: 1024px) {
#page {
min-height: calc(100vh - 397.5px);
}
}and replace 397.5px with the height of the header/navigation.
Let me know :)
Hi Leo!
How are the values added? As it's not exactly <header> + <nav> (eg: my header was 66.7px, nav was 70px; ended up needing 300+ px).
Different media queries required different heights.
Any flexbox or CSS grid method instead?
Should only need one media query.
Think we would have to target specific pages if you use flexbox.
Any chance you can link me to the page in question?
Sure. It's
https://rent.asiamannequin.com
Can't provide access right now as it's a live site; so gotta test with the Chrome Dev Tools.
Hi there,
you can try something like this:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container.grid-container {
width: 100%;
}
.site-footer {
margin-top: auto;
}Hi David, this worked perfect! Thank you so much for both replies. Awesome!! :)
Glad we could be of help
