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

啊...您指的是 CSS 100% 高度问题。也看看这个：100% 最小高度 CSS 布局。

Answer 3

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

Answer 4

嗯....

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

清除左侧div？

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

嗯，有这个... FIDDLE UPDATE

但它确实使用了定位。

Answer 5

试试这个，

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

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