Question

我正在尝试制作一个简单的粘性页脚但是当我使用margin-bottom时没有任何反应。 :( 任何帮助都是极好的！这是代码。

<body>
<div class="main">
<center>
<img src="img/profpic.png" style="height:300.5px; width:auto; margin-top:75px; margin-bottom:30px;"/> <br/>
<span style="color:#FFF; font-size:69px;">Hi, $firstname</span> <br/>
<img src="img/button.jpg" style="height:111px; width:auto; margin-top:120px; margin-bottom:135px;"/> <br/>
<span style="color:#FFF; font-size:54px; ">Or Tap Here</span> <br/>
<!--Footer -->
<div style=" margin-bottom:10px; height:10px; width:100%; border-top:solid 1px white; color:#FFF; font-size:46px;">Happyfaxe</div>
</center>
</div>
</body>

Answer 1

margin-bottom会在元素下方添加空格，但不会将其重新定位到页面底部。

尝试将此添加到您的粘性页脚div：

position:fixed;
bottom:0;

修改：jsfiddle

Answer 2

margin-bottom只是为它应用的元素添加一个缓冲区。粘性页脚有点棘手。它需要一些特殊的结构才能让它像你期望的那样工作。

这是一篇关于如何做你想做的事情的精彩文章 CSS-Tricks, Sticky footer

这是另一个做同样的事情： cssstickyfooter.com

粘滞页脚问题CSS

2 个答案: