0

请在此处查看 jsFiddle：

http://jsfiddle.net/sheriffderek/y7fPK/1/

html, body {
height: 100%;
}

.page-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
}

和一个缓冲区和页脚......小提琴会更有意义。

粘性页脚运行良好，但向下滚动时正文未扩展到包含内容。

在此处输入图像描述

VS。（向下滚动时）

在此处输入图像描述
看到这个橙色了吗？红色是主体，HTML 是橙色......它没有越过视口。如果我从正文中删除 height: 100% ，这可以解决这个问题 - 但是页脚会跳到内容的末尾。似乎 100% 的高度只是视口的高度。这是有道理的...但我希望正文与 HTML 一样大...任何想法？

感谢您的时间。

4

1 回答 1

0

隐藏在包装器上的一个简单溢出似乎对我有用。

这是一支笔。

http://codepen.io/sheriffderek/pen/DiewF

HTML：

<html><body>

    <div class="wrapper">

      <header>
          HEADER
      </header>

      <section class="main-content">
          MAIN CONTENT
      </section> <!-- end .main-content -->

      <div class="footer-buffer">BUFFER</div>

    </div><!-- end .wrapper -->

    <footer>
        FOOTER
    </footer>

</body></html>

CSS：

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important; /* for IE 6 */
  height: 100%; /* for IE 6 */
  margin: 0 auto -4em;

  /* new addition */
  overflow: hidden; /* this seems to do the trick */
  /* remove this to see the problem */
}

footer, .footer-buffer {
  height: 4em;
}
于 2013-02-12T22:09:56.190 回答