0

2行のコンテナを持つコンテナ（ラッパー）があり、両方の行の高さの値をautoとして指定して、その中のコンテンツに基づいて動的にサイズを変更できるようにしました（各行に特定の高さを指定するのではなく、row-top height 46 % および行下部 54%)。一番下の行のコンテナーの高さを CSS で画面に自動入力しようとしています (*JavaScript ではありません)。意図した結果については、下に添付されている画像を確認してください。アドバイスください、よろしくお願いします。

JSfiddle でプレビューするには、ここをクリックしてください

HTML

<div id="content-wrapper">
    <div id="row-top">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div> 
    <div id="row-bottom">
        <iframe id="gmap"></iframe>
    </div>
</div>

CSS

#content-wrapper {
    display:block;
    height:100%;
    overflow-y: scroll;
    width:600px;
    float:left;
    background-color:yellow;
}

#row-top {
    color:#fff;
    display:block;
    position:relative;
    width:100%;
    height:auto;
    background-color:blue;
}

#row-bottom {
    display:block;
    width:100%;
    height:auto;
}

iframe#gmap {
    overflow: hidden;
    height:100%;
    width: 100%   
}

JSfiddle でプレビューするには、ここをクリックしてください

意図した結果:

このように見えるはずです

4

1 に答える 1

2

一般的な CSS を使用する方法はありません。

共通の CSS を使用する場合は、コンテナでを設定displayする必要があり、子では値を使用します。現在、仕様では（匿名の​​）セルの高さを計算する方法は定義されていませんが、設定すると機能するようです（少なくともFirefoxでは）。tabletable-rowheight100%

CSS Flexible Box Layout Moduleで定義されている CSS プロパティを使用することもできますが、これは一部のブラウザの一部の古いバージョンでは適切にサポートされていません。

ただし、この新しいレイアウト モジュールを使用すると、コンテナにdisplaytoflexとflex-directiontoを設定するだけで済みます。columnこのようにして、通常のブロック レイアウトのようなレイアウトが得られますが、2 行目に を設定flexする1と、残りのすべてのスペースが強制的に使用されます。

Working Fiddle: http://jsfiddle.net/Q4uC8/1/ (Chrome と Firefox のみでテスト済み)

于 2013-11-28T02:33:43.800 に答える