Materalize footer doesn't stay at bottom?
Question
Im using materialize for my webpage, and for some reason the footer won't stay at the bottom even though I use Materialize own recommended CSS for this. Am I missing something?
Here's the CSS:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
And here's the HTML for the footer:
<footer class="page-footer green lighten-1">
<div class="container">
<div class="wrapper">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h4 class="green-text" id="mailIcon"><i class="material-icons">mail</i></h4>
<p class="white-text">info@storytourist.com</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h4 class="green-text" id="adressIcon"><i class="material-icons">map</i></h4>
<p>Veldrom AB, Anckargripsgatan 3, 211 19 Malmö, Sweden</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h4 class="green-text" id="phoneIcon"><i class="material-icons">phone</i></h4>
<p class="white-text">+46 720 427 346</p>
</div>
</div>
</div>
</footer>
2 answers
solution1
1 2018-05-07 11:54:54
PROBLEM SOLVED.
Didn't use a main tag.
<body>
<main> //added
<div class="container">
</div>
</main>
<footer> this is my footer </footer>
<body>
solution2
0 2018-05-07 08:05:16
For sticking your footer to the botton add this to your css:
.page-footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
The Complete CSS will be:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.page-footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
Reference
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Footer doesn't stay on bottom
Footer on site doesn't stay on the bottom of the page?
Footer doesn't stay at the bottom with content
The footer which is absolute with bottom = 0 , doesn't stay at bottom
Wordpress theme - My footer doesn't stay at the bottom
footer doesn't stay at bottom of screen when body text is long
Footer doesn't stay on bottom of page when not enough content is displayed
My footer doesn't stay at the bottom of my webpage
CSS footer doesn't stay at bottom on small screen size
Footer won't stay in the bottom of the page
Related Tags