没有图片我不知道怎么问这个。我有两个并排的 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/