css 并排 float div 高度 100%

标签 css layout internet-explorer-6 html

没有图片我不知道怎么问这个。我有两个并排的 div,在另一个带有填充和边距的 div 中。这就是我想要实现的目标:

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

但这就是我得到的。我可以 float div 并补偿边距等,但我无法让 div C 扩展到 A 的整个高度。A 和 B 都没有固定高度,那么如何让 C 扩展到A的全高?

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+----------------------------------------------------------------------------+

A 的高度被 B 的高度拉伸(stretch)。它也是一个完全流动的布局,所以宽度也不是固定的。基本上,我需要 C 来扩展 A 的整个高度。

我试过所有的高度,但我无法让它工作,因为高度不固定:(

A 基本上只是一个 div 包装器,没有填充,没有边距。 B其实是由两个带有margin和padding的div组成的,float:left; C只是一个div,float:right;

编辑: 我也需要支持 IE,没有 CSS hack

最佳答案

如何让 C position: absolute; right: 0; 而不是 float ?像这样:http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto;
position: relative;
}

#b {height: 200px;
    width: 200px;
    margin: 50px;
    float: left;
}

#c { height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
}

关于css 并排 float div 高度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4608624/

相关文章:

javascript - 悬停在 "slider"中更改图像

java - 我应该从layout_weight转向dip吗?

internet-explorer-6 - gzip和IE6的已知问题

html - 与 IE6 的兼容性

html - HTML 中的下划线文本

html - 使用 Twitter Bootstrap 3.0 的内联文本字段

html - 无法为选项卡内容设置边框顶部

jquery - stellar.js - 在 JSFiddle 中很好但在本地不稳定?

android - 如何在android中的相对布局内安排两个线性布局?

java - Android 在一切之上叠加一个 View ?