简介

Question

简介

页脚的许多优秀且经过良好测试的配方始终作为页面的底部但不是固定的（或重叠内容）。这是一个适合我的方法：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解决方案？

Answer 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

CSS“Sticky Footer”带有额外的包装div

简介

问题描述

1 个答案: