0

2 行のコンテンツ.tier1と.tier2. .tier1コンテンツは常に、高さの 60% と.tier2残りの 40%を占めて、ビューポートの寸法内に収まる必要があります。現時点では、これに対する最善のアプローチが何であるかはわかりません.javascriptを使用して、ビューポートの寸法を監視し、高さを設定して、.tier適用されたコンテナが有効になるようにすることができますが、これを行うことができるかどうか疑問に思っていましたCSSを使用していますか？

CSS

.content1 {
    height: 60%;
}
.content2 {
    height: 40%;
}

HTML

<div class="container">
    <div class="tier">
        <div class="content content1">
            <img src="http://dummyimage.com/600x400/000/fff">
        </div>
    </div>
    <div class="tier">
        <div class="content content2">
            <img src="http://dummyimage.com/600x400/dedede/fff">
        </div>
    </div>
</div>

フィドル http://jsfiddle.net/EK6QT/1/

4

1 に答える 1

0

サポートする必要があるブラウザー ( CanIUse... 参照) に応じて、いつでも CSS3 Viewport Relative Lengthsを導入できます。

ビューポートのパーセンテージの長さは、最初の包含ブロックのサイズに相対的です。最初の包含ブロックの高さまたは幅が変更されると、それに応じてスケーリングされます。

したがって、あなたの例では、を使用するのではなく%、単に使用しますvh：

.content1 {
    height: 60vh;
}
.content2 {
    height: 40vh;
}

JSFiddle デモ。

これらが何であるかについてより詳細な詳細が必要な場合は、これらについて説明する別の回答があります: https://stackoverflow.com/a/16837667/1317805

于 2013-10-16T21:42:31.263 に答える