Question

我正在学习CSS3和HTML5，并对粘性页脚的最佳实践感到好奇。我应该知道的任何盒子/弹性/冷却属性？

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>

Answer 2

您可能想要使用flexbox，请查看A Complete guide to Flexbox。我在下面举了一个例子：

＆＃13;

html,body {height: 100%; width: 100%; margin: 0em; padding: 0em;}
    #container {display:flex; flex-direction: column; min-height: 100%;}
    #content {flex: 1;}

＆＃13;

<html>
<body>
  <div id="container">
      <div id="content">
        Blah blah blah.., I'm the content..
      </div>
      <div id="footer">
        Look down here.., I'm the footer!
      </div>
  </div>
</body>
</html>

＆＃13;

CSS3 + HTML5中的粘性页脚

2 个答案: