拉伸右浮动div宽度？答案

【问题标题】：Stretch right float div width?拉伸右浮动div宽度？
【发布时间】：2012-01-31 14:34:08
【问题描述】：

我有 2 个 float:left div，第一个是固定的，我希望第二个 div 拉伸剩余空间。

<div id="container">
 <div id="leftform"> </div>
 <div id="rightform"> </div>
</div>

有什么想法吗？谢谢

【问题讨论】：

标签： html css

【解决方案1】：

在 CSS2 中：

#container {display:table; table-layout:fixed;}
#leftform, #rightform {display:table-cell;}
#leftform {width:100px;}

在 IE 黑客世界中：

#container {padding-left:100px;}
#leftform {float:left; width:100px; margin-left:-100px;}

【讨论】：

IE hacks 版本是在任何浏览器上执行此操作的常用方式。即使浏览器支持表格显示值，直接在'table'中使用'table-cell'而不定义'table-row'也是未定义的。
@bobince：你错了。 CSS 需要自动生成缺失的匿名表格元素。它被指定并可靠地工作：w3.org/TR/CSS21/tables.html#anonymous-boxes

【解决方案2】：

使用 javascript 函数使两者的高度相等。

//fixing column height problem using Prototype
Event.observe(window,"load",function(){                         
    if(parseInt($('leftform').getStyle('height')) > parseInt($('rightform').getStyle('height')))
        $('rightform').setStyle({'height' : parseInt($('leftform').getStyle('height'))+'px'});
    else
        $('leftform').setStyle({'height' : parseInt($('rightform').getStyle('height'))+'px'});
});//observe

同样的问题here。

【讨论】：