javascript - HTML 5 Div 位置

Question

<div id="first">Something</div>
<div id="last">something too</div>

<style>
     #last {
          position: absolute;
          margin:0;
          padding:0;
          bottom:0; /*yes this div is at the bottom*/
     }
     #first {

     }
</style>

我的问题是我无法到达带有第一个 div 边框的最后一个 div。
我想让最后一个div在底部，第一个div有overflow:auto;？但它不起作用。
当我填充我的 div 时，一些文本没有显示任何滚动条或类似的东西，第一个 div 类型落后于最后一个 div，即使我没有为它们分配任何 z-index 值。

我该如何解决这个问题？我希望我的第一个 div 增长直到它到达最后一个 div 并用文本填充它，也许只需要它时滚动出现。我的意思是当两个 div 相互接触时。

Answer 1

这将为您提供固定大小的页脚 (#last)，但内容 (#first) 会根据需要扩展:

body {
    margin: 0px;
    padding: 0px;
}

#wrapper {
    position: absolute;
    top: 0;
    bottom: 200px;
    left: 0;
    right: 0;
}

#first {
    background-color: #5588FF;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

#last {
    background-color: #FF8855;
    position: fixed;
    bottom: 0px;
    height: 200px;
    width: 100%;
}

请参阅此 fiddle 以获得完整的解决方案:http://jsfiddle.net/xWa9f/4/