对齐页面底部的分隔

Question

有没有一种方法可以在实际HTML页面的底部对齐分区，而不是屏幕的底部，所以如果页面高度大于屏幕的高度，意味着有滚动，则分区应该固定在底部。

.contact_us{
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background-color: green;
    z-index: 500;
}

在css中设置后，它似乎使用了屏幕底部，而不是页面——它本身就是

Answer 1

如注释中所述，当使用css定位时，您需要有一个可以参考的地方，否则它将自动引用Window。absolute是指具有非静态（默认）定位的第一个父级。最常见的技巧是使用相对定位，这非常方便，因为如果你在改变定位类型的同时不设置偏移（顶部、左侧…），它就没有效果，从而成为其子所有定位的参考

你可以在这里看到一些效果：

http://jsfiddle.net/techunter/M4kSQ/

速记答案

使一个具有非静态位置的父对象（如）

#some_parent{
    position:relative;
}

Answer 2

页脚始终位于页面底部（即使内容很短）

演示：http://gvee.co.uk/files/html/footer.htm

HTML

<div id="container">
    <div id="header">header</div>
    <div id="body">body</div>
    <div id="footer">footer</div>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
    border: 0;
}
html, body
{
    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;
}

条件IE CSS

<!--[if lte IE 6]>
    <style type="text/css">
        #container
        {
            height: 100%;
        }
    </style>
<![endif]-->