コンテナdivを縦に伸ばしてIEにテーブルに合わせる方法は？

Question

私はかなり単純な3つの列レイアウトに問題があります。そこには、他のいくつかのdivが含まれているコンテナdivがあります。その中には基本的にデザインのために存在するものもあります。だから、関連するソースは、ビットのようになります。デザインが機能するために

<div id="wrapper"> 
    <div id="left-side-decoration">&nbsp;</div> 
    <div id="right-side-decoration">&nbsp;</div> 
    <div id="content"> 
    <table id="datatable"> 
     <thead><th>Title</th></thead> 
     <tr><td>Content Row 1</td></tr> 
     <tr><td>Content Row 2</td></tr> 
     <tr><td>Content Row 3</td></tr> 
    </table> 
    </div> 
    <div id="footer-decoration"> 
</div> 

私は、全体の高さは、ブラウザウィンドウの少なくとも高さにする必要があります。

#wrapper 
    { 
    height: 100%; 
    } 
#left-side-decoration 
    { 
     float: left; 
     height: 100%; 
     width: 154px; 
     background-color: red; 
    } 
#right-side-decoration 
    { 
     float: right; 
     width: 1em; 
     height: 100%; 
     background-color: red; 
    } 
#content 
    { 
    height: 100%; 
    border: 1px solid #6f9dd9; 
    margin-left: 154px; 
    margin-right: 1em; 
    } 
#footer-decoration 
    { 
    height: 3em; 
    clear: both; 
    background-color: green; 
    } 

は今、これは罰金Firefoxで、多くの場合、IE内で動作しますが、datatableは、ブラウザウィンドウの高さよりも背の高い得ることができます。だから私はこのように動作しますスタイルシートを持っています。それが起こると、footer-decoration divの下で消え、Internet Explorerユーザーのためにその下に再び表示されます。

私はオーバーフローの設定を変更しようとしたが、私は、ページの下部にあるコンテンツを失うか、スクロールバーを持っている必要はありません、私が本当にしたいことは少なくともの高さにページのためにあるきブラウザのウィンドウですが、多分少し大きめです。これの明白なことはmin-heightを使用することですが、私がleft-side-decorationとright-side-decorationの両方を使用して高さを数ピクセルに縮小し、どちらも100％の高さや100％の高さを使用しても変化しないようにするには、それ。

height: 100%私のテーブルはIEのページの一番下にあります。私がmin-height: 100%を使用した場合、私のサイドパネルは何もなくなります。私は、最小高さの問題はdivsが浮動してページフローから外れることに関係していると考えていますが、それを修正する良い方法はありません。どんな解決策ですか？

Answer 1

これまで私が見てきたすべての耐久性のある解決策には、ブラウザウィンドウのサイズを監視し、適切なdivタグのサイズを適切に合わせるためのJavascriptが必要です。

initailページの読み込みと「サイズ変更」イベントを処理する必要があります。また、ポストバック後にサイズを再計算する必要があるかもしれません。