2012-03-31 27 views
4

100%高さのdivを表示内に入れようとしています。つまり、table-cell divですが、IEでは機能しないようです。 IEのすべての回避策ですか?ディスプレイ内の高さの100%div:

<div style="display:table-row;"> 
    <div style="display:table-cell; background-color:blue; border-left:solid 1px #CCC;"> 
     <div style="position:relative; height:100%; width:100%; background-color:red;"> 
     </div> 
    </div> 
</div> 
+0

はdiv要素内のコンテンツを追加するロードされているすべての要素の前に実行することができます.ready対ロードした後

.LOADが呼び出されます。またはminの高さを定義します。 –

答えて

1

親のdivの高さと幅が設定されているオート:

は、ここに私のコードです。赤いdivを表示する場合は、親divの高さと幅を初期化します。

<div style="display: table-row;"> 
    <div style="display: table-cell; background-color: blue; border-left: solid 1px #CCC;height:20px;width:30px;"> 
     <div style="position: relative; height: 100%; width: 100%; background-color: red;"> 

     </div> 
    </div> 
</div> 
+0

完全なコードでは、私は他の固定された高さのテーブル行があり、テーブルの高さの残りの部分を取るためにこのテーブル行が必要なので、固定された高さを置くことはできません。 – user1304988

+0

申し訳ありませんが、私はそれを働かせるように見えることはできません。私も答えを探してみましたが、多くの人がこの問題を抱えているようです。 – GolezTrol

2

私はこれがかなり古い投稿であることを認識していますが、私はここで解決策を探していました。

ちょっとだけjQueryを使いました。これは、実際に全幅に合わせて.column内で100%の高さで自分の要素を引き起こす流れた高さに等しい明示的な高さを強制

jQuery(document).ready(function($){ 
    $('.column').each(function(){ 
     var $this = $(this) 
     $this.height($this.height()); 
    }); 
}); 

:(表セル要素の.column 'は私のことをいいます)。

のFirefox、ChromeとIEの現在のバージョンで動作9.

リビジョン:あなたは高さに影響するテーブルセル要素内の画像をロードしている場合、あなたはjQueryの上で上記のコードを実行することになるでしょう(ウィンドウ).load()。 Chromeには、image.readyの画像サイズに関する問題があります。 上記のコードを移動すると、問題が解決しました。すべての要素が(画像を含む)

関連する問題