0

IE で作業できないレイアウトの実例があります。ボタンをクリックすると、下部の div でサイズを 50px と 100px の間で切り替えます。

フィドルを作ろうとしましたが、うまくいきませんでした。

<style type="text/css">
    .table
    {
        display: table;
        width: 100%;
        height: 100%;
    }

    .bottom
    {
        display: table-row;
        height: 100px;
        background-color: red;
    }

    .top
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }

    .header
    {
         height: 100px;
         background-color : gray;
    }

    .content
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }

    .footer
    {
        display: table-row;
        height: 100px;
        background-color: blue;
    }

</style>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
<div class="table">
    <div class="top">
        <div class="table">
            <div class="header" >
                header
            </div>
             <div class="content">
                1.1
            </div>
            <div class="footer">
                1.2
            </div>
        </div>
    </div>
    <div class="bottom">
    <!-- Can change bottom height to 50px on click -->
        <button id="changeSize"></button>
    </div>
</div>
</div>
4

1 に答える 1

0

上記のコードを jsfiddle で動作させました: http://jsfiddle.net/c8nLb/1/

私の知る限り、IE(9) で動作します。

クラス最下位の要素に気付き、IDに変更しました（getElementsByClassName IE解決の問題）

また、高さをメインの CSS スタイル ルール ブロックからインライン スタイルに移動しました。これは、Javascript で高さスタイルを取得するのに問題があったためです。

うまくいけば、それもあなたに役立ちます！

于 2012-06-25T18:16:48.757 に答える