jquery - 在高度为 :100% 的溢出元素之后放置页脚

因为某些原因，我有这样的场景:

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 为长文本和短文本获得此行为。

最佳答案

如果 body 元素的高度必须为 100%，则将 #ng-scope div 和页脚包裹在一个公共(public)父元素中:

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

关于jquery - 在高度为 :100% 的溢出元素之后放置页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27761764/