Question

好的关于Ryan Fait's sticky footer的问题很多，但请不要立即忽视这个问题！我想要做的是为我的页脚设置一个动态大小的高度，并将其粘在页面底部。

Ryan Fait的解决方案是将所有页面内容包装在#wrapper中，并将#wrapper的{{1}}设置为页脚的高度。当硬编码到CSS中时，这非常有效，但我不知道我的页脚会有多大。因此，我希望能够使用javascript设置margin-bottom的{{1}}。到目前为止，我一直没有成功。 Here是我的设置。

我已经这么久了，我的头发很少拉出来。你知道我的错误在哪里吗？

JSFiddle上的代码

HTML

#wrapper

CSS

margin-bottom

JQuery的

<body>
    <div id="wrapper">
   Wrapper
    </div> <!-- #wrapper -->

    <footer>
        Footer
    </footer>
</body>

Answer 1

你现在可以在css中做到这一点：

html, body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:table;
}
main, footer {
  display:table-row;
}
main {height:100%;background:red;}
footer {background:green;}
footer:hover br {display:none;}/* whatever else on footer:hover s for demo purpose */

<main>
  <div>
    main
  </div>
</main>
<footer>
  <div>
    footer<br/>
    footer<br/>
  </div>
</footer>

DEMO http://codepen.io/anon/pen/EvHwk

使用Ryan Fait的代码动态粘贴页脚高度

1 个答案: