在高度溢出的元素后放置页脚：100%答案

【问题标题】：Placing footer after overflowed element with height:100%在高度溢出的元素后放置页脚：100%
【发布时间】：2015-01-04 22:01:37
【问题描述】：

由于某些原因，我有这样的场景：

HTML：

<body>
<div id="ng-scope">
    <p>
        [[VERY LONG TEXT]]
    </p>
</div>
<div id="footer">Footer</div>
</body>

CSS：

html,body{
    height: 100%
}

#ng-scope {
    height: 100%;
    background-color:red;
}

#footer{
    background-color: green;
}

我想要完成的是将页脚放在页面底部，而不是中间。

所以，到目前为止，我发现我可以通过使用溢出滚动或自动属性来做到这一点：

#ng-scope {
    height: 100%;
    background-color:red;
    overflow:scroll;
}

但是，我有一个由 $(window).scroll 触发的 jQuery 事件，当我使用溢出滚动或自动时停止工作。

因此，我的问题是，还有其他方法可以将页脚放在末尾吗？

（或者：如何使 jQuery 滚动事件在该场景中工作）

非常感谢！

编辑：我希望#ng-scope 元素为页面高度的 100%，即使文本非常短。这就是为什么我需要 html 和 body 的高度：100%。我想要的行为是，当我有一个长文本时：

html,body{
    height: auto;
}

#ng-scope {
    height: 100%;
    background-color:red;
}

#footer{
    background-color: green;
}

当我有一个简短的文字时：

html,body{
    height: auto;
}

#ng-scope {
    height: 100%;
    background-color:red;
}

#footer{
    background-color: green;
}

我想使用相同的 css 获得长文本和短文本的这种行为。

【问题讨论】：

【解决方案1】：

如果 body 元素的高度必须为 100%，则将 #ng-scope div 和 footer 都包含在一个共同的父元素中：

<div id='wrapper'>
    <div id='ng-scope'>
    a lot of content...
    </div>
    <div id='footer'>Footer</div>
</div>

【讨论】：

非常感谢您的回答！不幸的是，我也需要 html 和 body 为 height:100%。我希望#ng-scope 成为“全屏”，但有时它会溢出并且页脚会出现错误的位置......
该解决方案的问题在于，如果我没有在#wrapper 中指定高度，那么#ng-score 将不再具有页面高度：jsfiddle.net/04hospnu。如果你把 height:100% 放到#wrapper 上，你会得到我想要的行为：jsfiddle.net/mmvbd65g，但是当你有一个长文本时，这个解决方案不起作用：jsfiddle.net/qw44sdx8。