Materalize頁腳不停留在底部？
[英]Materalize footer doesn't stay at bottom?
問題描述
我在網頁上使用了Materialize，由於某種原因，即使我為此使用了Materialize自己推薦的CSS，頁腳也不會停留在底部。 我想念什么嗎？
這是CSS：
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
這是頁腳的HTML：
<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 個解決方案
解決方案1
1 2018-05-07 11:54:54
問題解決了。
沒有使用主標簽。
<body>
<main> //added
<div class="container">
</div>
</main>
<footer> this is my footer </footer>
<body>
解決方案2
0 2018-05-07 08:05:16
為了將頁腳粘貼到botton，請將其添加到css：
.page-footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
完整的CSS將是：
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;
}
參考
頁腳不會停留在底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.