0

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

4

2 回答 2

0

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

<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>
于 2013-01-31T21:02:00.567 回答
0

您可能确实想使用 flexbox，请查看 Flexbox完整指南。我在下面包含了一个示例：

html,body {height: 100%; width: 100%; margin: 0em; padding: 0em;}
    #container {display:flex; flex-direction: column; min-height: 100%;}
    #content {flex: 1;}
<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>

于 2014-12-27T21:17:08.863 回答