0

介绍

对于始终位于页面底部但不固定（或重叠内容）的页脚，有许多好的且经过良好测试的方法。这是对我有用的一个：http ://ryanfait.com/sticky-footer/

简而言之，它的工作原理如下：

HTML：

<html><body>
  <div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>

CSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#wrapper {
  min-height: 100%;
  height: 100%;
  margin: 0 auto -4em;
}
footer {
  height: 4em;
}

诀窍是#wrapper强制使用 100% 的可用高度，但边距底部为页脚留出了一些空间（负边距正好是页脚的大小）。

问题描述

在构建单页应用程序时，一些 javascripts 框架（如Ember.js）会在我们的文档结构中添加额外的 div（例如用于处理事件）。这会在我们的原始文档周围创建一个额外的包装器，如下所示：

<html><body>
  <div class="framework-container">
    <div id="wrapper>SOME CONTENT</div><footer></footer>
  </div>
</body></html>

这额外div破坏了我们的 CSS 设置。为了改善我们想说的情况，framework-container应该表现得完全一样body，所以我们可以尝试添加：

.framework-container {
  position: relative;
  height: 100%;
  min-height: 100%;
}

它几乎可以工作：如果内容小于页面高度。否则页脚和页面底部之间会有明显的距离——我们不能接受。

有谁知道这个问题的纯 CSS 解决方案？

4

1 回答 1

1

我不确定您是否说包装器有效，但您可以告诉 Ember 将应用程序插入到特定元素中，并且它不会在该元素之外（上方）插入任何元素。

设置根元素 

App = Em.Application.create({
  rootElement: '#body'
});

HTML

<div id="container">
  <div id="header">I'm a header</div>
  <div id="body"></div>
  <div id="footer">I'm a footer</div>
</div>

CSS 

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

http://emberjs.jsbin.com/OPaguRU/1/edit

我完全从以下内容中提取了一些内容：http: //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

于 2013-11-10T18:25:10.020 回答