在HTML中，如何将文本保留在div的底部（作为页脚），并防止文本在屏幕上浮动超过500px

Question

例

我想将文本保留在屏幕底部，浮动在右下角（调整大小时），直到屏幕为500px，然后停止

的CSS

div.content{

    min-height:550px;
}
div.footer{

    height:20px; 
    color: #999999;
    font-size: 0.9em;
    text-align: right;
    bottom:0;
    right:0;
    position:absolute;
    padding-right: 10px;
    padding-bottom: 10px;
}

的HTML

<div class=content></div>
<div class=footer>version2</div>

这行不通。 页脚文本将在调整大小的整个过程中跟随屏幕。 有什么建议么？

Answer 1

首先，由于页脚不是内容的子元素，因此它将“永远”相对于它定位。

其次，如果您需要某种方法来切换行为（从始终从底部到始终），则需要使用javascript。 我将尝试并考虑解决方案。

Answer 2

您没有在内容容器上指定绝对值，因此绝对值是相对于窗口的。 然后，您需要在内容中添加页脚。 或同时使用容器。

http://jsfiddle.net/mrtsherman/u86uf/

div.content{
    min-height:550px;
    position: relative;
}

<div class="content">content
    <div class="footer">footer</div>
</div>

要么

http://jsfiddle.net/mrtsherman/u86uf/1/

div.wrapper { position: relative; }
div.content{
    min-height:550px;
}

<div class="wrapper">
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>