【问题标题】：CSS "Sticky Footer" with additonal wrapper div带有附加包装 div 的 CSS“粘滞页脚”
【发布时间】：2013-11-11 02:38:46
【问题描述】：

简介

对于始终位于页面底部但不固定（或重叠内容）的页脚，有许多好的且经过良好测试的方法。这是一个适合我的：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% 的可用高度，但边距底部为页脚留出了一些空间（负边距正好是页脚的大小）。

问题描述

在构建单页应用程序时，Ember.js 等一些 javascript 框架会在我们的文档结构中添加额外的 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 解决方案吗？

【问题讨论】：

标签： html css ember.js

【解决方案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获取了其中的一些内容

【讨论】：

这是否意味着我可以说 rootElement: "body" 并且 Ember 不会在我在模板中定义的内容之上创建任何额外的“顶级”层次结构 div？
body 是 rootElement 的默认值。我刚刚弄清楚你在底部说了什么，所以我的评论可能会让你误入歧途。我说的是真的，但我不确定这是否会对你有所帮助。
特别是对于 ember，问题是由应用程序视图创建的，该视图添加了它的 div 并包装了我们可以控制的所有出口。想知道我们是否可以说：App.ApplicationView = Ember.View.extend({ tagName: "script" })
检查了我的最后一条评论 - 它不起作用，至少在我相当过时的 ember 1.0.0-pre2 设置中
试试这个。 Ember 1.0 已经发布了一段时间，您应该尽快升级，有一些重大更改和修复。