HTML 5 Div位置 [英] HTML 5 Div Position

问题描述

<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有溢出：auto;？但它不工作。
当我填充我的div一些文本没有显示没有滚动条或任何类似的东西，第一种种类落后最后一个div，即使我没有分配任何Z索引值。




如何解决这个问题？我希望我的第一个div成长，直到它到达最后一个div，并填充它的文本，也许与滚动出现，当它只需要。

My problem is that I can't reach last div with the border of the first div.
I want last div to be at bottom and first div to have overflow:auto;? But it doesn't work.
When I fill my div some text nothing is showing no scrollbar or anything like that and the first div kind of goes behind the last div even though I haven't assigned them any z-index values.

How Can I solve this? I want my first div to grow until it reaches last div and fill it with text maybe with scrolling appearing when it is only needed. I mean when two divs touch each other kind of.

推荐答案

这将给你一个固定大小的页脚（ #last ），但内容（ #first ）会根据需要扩展：

This will give you a fixed size footer (#last) but the content (#first) expands as needed:

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%;
}

查看完整的解决方案： http://jsfiddle.net/xWa9f/4/

See this fiddle for the full solution: http://jsfiddle.net/xWa9f/4/

这篇关于HTML 5 Div位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！