CSS：将div与父div的底部对齐

Question

http://jsfiddle.net/nFrp7/4/

我的布局类似于我创建的这个jsfiddle。我想知道如何让蓝色div将自己定位在底部（红色div扩展的地方），无论如何（但不使用position: fixed;或bottom: 0;）。

我该怎么做？

Answer 1

检查一下 http://jsfiddle.net/nFrp7/10/

使用包装div来包含所有布局div并使用蓝色div的绝对定位

Answer 2

在所有内容周围放置一个包装div并将height:400px;和position:relative;应用于其中。然后在蓝色position:absolute;上使用bottom:0;，right:0;和div。

Answer 3

嗯....

.right-main {
width: 100px;
height: 30px;
clear: both;
background-color: green;
}

清除左边的div？

由于一切都是浮动的，我认为如果没有一些定位，这是不可能的。

这就是...... FIDDLE UPDATE

但确实使用了定位。

Answer 4

啊......你指的是CSS 100% height problem。也请查看：100% Min Height CSS layout。

Answer 5

试试这个，

.right-main {
      width: 100px;
      **height: 400px;**
      background-color: green;
    **position: relative;**
    } 

.bottom-right {
      background-color: blue;
      **position:absolute;**
      **bottom: 0;**
    }