0

私は非常に単純なページを持っています:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />   
    <link rel="stylesheet" href="@Url.Content("~/ui/all.min.css")" type="text/css" />
</head>
<body>   
    <div class="header">

</div>

</body>
</html>

そしてCSS：

.header
{
    height:70%;
    width:100%;
    background:#990663;
}

body
{
    margin:0px;
    padding: 0px;
    height:100%;
    width:100%;
}

*
{
    margin: 0px auto;
}

div の高さを画面の 70% にしたい。どうすればそれを達成できますか？高さを400pxにするとうまくいきます。では、なぜ70%ではないのでしょうか? これを達成する方法はありますか？

4

2 に答える 2

3

html高さが 100% になるように更新する必要があります(およびbody):

html, body { height: 100%; }

( JSFiddle )

これは、100%が常に親コンテナーに対して相対的であるためです (bodyそのためhtml)。

このトピックに関する役立つ投稿の 1 つがこちらです。FTA:

まず、html と body タグの両方に 100% の高さを与える必要があります。これは見過ごされがちですが、親の高さが現在何を占めているかを認識していない限り、要素はパーセンテージの高さに調整されないため、非常に重要です。コンテナーは、html タグの子孫である body タグの子孫であるため、これは必須です。

于 2012-12-18T12:07:53.890 に答える
1

HTML の高さに 100% を追加するだけで、並べ替えられます。

html{
    height:100%;
}

ここをチェック

于 2012-12-18T12:08:00.997 に答える