对齐页面底部的分区

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指的是具有非静态（默认）定位的第一个父级。 最常见的技巧是使用非常方便的相对定位，因为如果你不设置偏移（顶部，左边......）旁边改变定位类型，它就没有效果，因此成为其子项的所有定位的参考< / p>

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

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

速记回答

使一个父级具有非静态位置，如

#some_parent{
    position:relative;
}

Answer 2

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

DEMO： 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]-->