I have a wordpress site with Minamaze theme. It has some large pages and some small pages.
If the page is smaller than the screen, I want the footer to be placed at the bottom of the screen (and preferably vertical center the body).
If the page is larger than the screen, I want the footer to be placed at the bottom of the page (so visible after scroll down).
I have tried a lot of options like:
footer {
position: relative;
margin-top: -144px; /* negative value of footer height */
height: 144px;
clear: both;
}
and I see a lot about "wrapper", but none really work.
The site is http://www.samenherbestemmen.nl, hope someone can help.
NB: I have it now that the footer sticks to the bottom all the time, but I prefer the footer to be placed at the bottom of the page when the page is larger than the screen.
Codepen http://codepen.io/noobskie/pen/wKpWXO?editors=110
I Think what your referring to is whats called a "sticky footer"
I used the same html markup with your current footer but i didn't use any of your css so you could run into some conflicts worth a shot though
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
<div id="footer">
<div id="footer-core" class="option4">
<div id="footer-col1" class="widget-area one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.grosfeldvandervelde.nl" target="_blank"><h3 class="widget-title"><font color="black">Grosfeld van der Velde</font><br><font color="#dbd8c1"> architecten</font>
</h3></a>
</center>
</div>
</aside>
</div>
<div id="footer-col2" class="widget-area one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.rho.nl" target="_blank"><h3 class="widget-title"><font color="black">Rho </font><br><font color="#dbd8c1">adviseurs voor leefruimte</font>
</h3></a>
</center>
</div>
</aside>
</div>
<div id="footer-col3" class="widget-area one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.pauwert.nl" target="_blank"><h3 class="widget-title"><font color="black">Van den Pauwert </font><br><font color="#dbd8c1">architecten</font>
</h3></a>
</center>
</div>
</aside>
</div>
<div id="footer-col4" class="widget-area last one_fourth">
<aside class=" widget widget_text">
<div class="textwidget">
<center><a href="http://www.verkerk-erfgoed.nl" tagert="_blank"><h3 class="widget-title"><font color="black">Verkerk </font><br><font color="#dbd8c1">erfgoed<font>
</font></font></h3></a>
</center>
</div><font color="#dbd8c1"><font>
</font></font>
</aside>
</div>
</div>
</div>
<!-- #footer --><font color="#dbd8c1"><font>
<div id="sub-footer">
<div id="sub-footer-core">
<!-- #footer-menu -->
<div class="copyright">
Copyright <a href="http://www.bergtop-ict.nl">BergTop ICT</a>
</div>
<!-- .copyright -->
</div>
</div>
</font></font>
</footer>
edit oops i forgot to mention you need to add the class site-footer
to the parent footer