6

CSS のパーセントに基づいて min-height を設定する方法はありますか?

高さと最小の高さの両方を使用した場合、両方をパーセントで使用することはできません。私のコンテンツはパーセントに基づいており、その高さが変更されたため、最小の高さを制御する方法を探しています。

高さを 100% にする必要があり、min-height もパーセントに基づいているため、高さを auto に設定することはできません。

それがページのデザインです。最小の高さまでフルスクリーンにする必要がありますが、1400 から 1100 の範囲では、ページは応答性が高く、パーセントで小さくなります。これらの比率を維持したいのですが、高さが 100% になるまで最小の特定の高さですが、コンテンツの高さが変化するため、特定の最小の高さも変更したい

<div class="outer">
    <div class="inner"></div>
</div>

body, html {
  height: 100%;
}
.outer {
    height:100%;
    background:red;
    /* MIN-HEIGHT ???????!!! */
}
.inner {
    position: absolute;
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}

ここに私の問題のフィドルがありますhttp://jsfiddle.net/LmDNx/1/

ご覧のとおり、外側の div の最小高さを内側の div のサイズとして設定したいのですが、内側の div はパーセントに基づいており、高さも 100% です。

UPDATE : その位置絶対を省略できます

4

4 に答える 4

6

デモ

heightとautoに設定できmin-heightます100%。つまり、innerdiv に静的な位置がある場合のみです。

.outer {
    height: auto;
    background:red;
    min-height: 100%;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto; /* or 0 if you want to maintain its position in the upper-left corner */
    padding-top: 30%;
}
于 2013-09-19T14:47:05.633 に答える
0

あなたの質問を正しく理解できれば、設定position: relativeと削除の両方がmargin: auto要件を満たしていますか?

body, html {
  height: 100%;
}
.outer {
    background:red;
    min-height: 100%;
    position: relative;
}
.inner {
    position: relative;
    background:blue;
    box-sizing: border-box;  /* required if you're using padding */
    width: 60%;
    padding-top: 30%;
}

http://jsfiddle.net/LmDNx/1/

于 2013-09-19T14:42:20.343 に答える
-1 
.outer {
    background:red;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}
于 2013-09-24T18:44:29.653 に答える