Question

由于某些原因，我有这种情况：

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和身体：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来获取长文本和短文本的这种行为。

Answer 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>