2009-04-05 15 views
7

私は2つの浮動小数点を持っています:左のdiv、最初の固定されていると私は残りのスペースをストレッチ2番目のdivをしたい。ストレッチ右フロートdiv幅?

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

CSS2のおかげで

答えて

8

:IEの世界では

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

がハッキング:

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

IEのハックバージョンは、どのブラウザでもそれを行う通常の方法です。ブラウザが表の表示値をサポートしていても、 'table-row'を持たない 'table'の内部で 'table-cell'を直接使用することは定義されていません。 – bobince

+1

@bobince:あなたは間違っています。 CSSは、欠落している匿名のテーブル要素を自動的に生成する必要があります。これは指定され、確実に動作します:http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes – Kornel

0

は、高さが両方とも同じにする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

関連する問題