html - CSS3 + HTML5 中的粘性页脚

Question

我正在学习 CSS3 和 HTML5，并且对粘性页脚的最佳实践感到好奇。我应该知道的任何 box/flex/cool 属性吗？

Answer 1

这对我有用，似乎是我找到的最简单的解决方案:

<style type="text/css">
   html,body {
      height:100%
   }

   #wrapper {
     min-height:100%;
     margin-bottom:-150px; /* negative total computed height of footer */
   }

   #footer_padding {
     height:150px; /* total computed height of footer */
   }

   #footer {
     height:100px;
     margin-top:50px;
   }
</style>    


<div id="wrapper">

   <div>some content...</div>

   <div id="footer_padding"></div>

</div>

<div id="footer"></div>