3

画面を 100% 埋める 2 つの div を並べて作成しようとしています。左の div にはいくつかのメニューが含まれ、右の div にはコンテンツが含まれます。これが私が現時点で持っているコードです: http://jsfiddle.net/HpWZW/。現在の問題は、高さが最小の div のコンテンツと同じくらいしかないことです。したがって、この場合、右の列の iframe は左の列のメニュー項目よりも大きくなります。ただし、高さは右側ではなく左側の div コンテンツに制限されます。何か案は？ありがとう！

コード

<div>
    <div class="table">
        <div class="innerLeft">
            <span>Left Column</Span>
        </div>

        <div class="innerRight">
            <span>Content with Iframe</span>
        </div>
    </table>
</div>​

...

html, body {height: 100%}

.table {

    display: table;
    height: 100%;

}

.innerLeft {

    display: table-cell;
    min-width: 160px;    

    background-color: lightblue;
    color: black;
}

.innerRight {

    display: table-cell;
    width: 100%;
    vertical-align: top;

    background-color: red;
    color: white;
}

</p>

4

4 に答える 4

6

これを見つけるまで、私は何度も同じ問題に遭遇しました: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

これは、列に高さを共有させるための有効な CSS ソリューションです。次に、両方が最大の列の高さになります。

列を画面全体に表示したい場合は、次のようなものを使用できます

.innerLeft {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%; 
}

.innerRight {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0; 
}
于 2012-12-05T15:00:35.283 に答える
1

これは css3 であり、古いブラウザーでは機能しないことに注意してください。

css3

<style>
html, body{height:100%;padding:0;margin:0;}
        div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
         div.table{width:100%;height:100%;}
          div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>

html:

<div class="table">
    <div class="innerLeft">
        <span>Left Column</Span>
    </div>

    <div class="innerRight">
        <span>Content with Iframe</span>
    </div>
</table>

ページ：

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            div.table, div.table * {
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
            }
            div.table {
                width:100%;
                height:100%;
            }
            div.table div {
                border:1px solid black;
                width:50%;
                height:100%;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="table">
            <div class="innerLeft"> <span>Left Column</span>

            </div>
            <div class="innerRight"> <span>Content with Iframe</span>

            </div>
        </div>
    </body>
</html>

上記のコードは、画面全体またはセクションを埋めたいときはいつでも 2 つの列を作成します。

次のコードは、画面全体を埋めるためにのみ使用できます (絶対位置を使用するとコンテナーの動作が奇妙になりますが、回避策があります)。

<!DOCTYPE html>
<html>

    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            #left {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
                background:red;
            }
            #right {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                right:0;
                background:blue;
            }
        </style>
    </head>

    <body>
        <div id="left"></div>
        <div id="right"></div>
    </body>

</html>
于 2012-12-05T15:01:52.633 に答える
-1

最短の答えは適切なテーブルを使用することです。min-heightも役立ちますが、すべてのブラウザがそれを尊重するわけではありません。

于 2012-12-05T14:57:24.780 に答える
-1

これはあなたが望むもののために働きますか?:

http://jsfiddle.net/Sgfnm/

<div>
    <div class="table">
        <div class="innerLeft">
            <span>Left Column</Span>
        </div>

        <div class="innerRight">
            <span>Content with Iframe</span>
        </div>
    </div>
</div>


.table {

    display: block;

}

.innerLeft {

    display: block;
    width: 160px;    

    background-color: lightblue;
    color: black;
    float:left;
}

.innerRight {

    display: block;
    width: 100%;
    vertical-align: top;

    background-color: red;
    color: white;
}
于 2012-12-05T15:07:44.363 に答える