1

パーセンテージを使用してCSSの流動的なレイアウトを処理しようとしてきましたが、いくつかのことをテストしているときにこの問題に遭遇するまで、どこかに到達していると思っていました. 以下のコードでは、ビューのすぐ外側に配置する必要がある 2 つの div があるため、スクロールしてもすぐに表示されます。

左マージンに合わせたものは完全に機能しますが、上マージンに合わせた div は、私を混乱させる結果をもたらします。望ましい結果を得るには、トップ マージンを 42% に設定する必要がありましたが、この数値がどこから来ているのかわかりません。私はそれが 90% (100% - トップバーの高さ) になると考えました。最初は、ブラウザー インターフェイスが含まれていることに関係があるのではないかと考えていましたが、私のインターフェイスが 48% であり、ブラウザーをフルスクリーンにするとうまくいきませんでした。修理する。本当に気になるのは、ナビゲーションの高さを 90% に設定し、トップバーの高さを 10% に設定すると、予想どおりビューに完全に収まるのに、なぜ高さ方向のマージンが異なるのですか?

私はまだこれらの属性とその仕組みを理解しようとしているので、できるだけ詳しく説明していただければ幸いです。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    background-color:#988557;
    width:100%;
    height:100%;
    margin:0%;
}
#topbar {
    margin-left:100%;
    background-color:#3F4A66;
    width:100%;
    height:10%;
}
#navigation {
    margin-top:42%;
    background-color:#3F4A66;
    width:10%;
    height:90%;
}
</style>
</head>
<body>

<div id="topbar">
</div>
<div id="navigation">
</div>

</body>
</html>
4

2 に答える 2

1

あなたの魔法の 42% は、含まれるブロックの幅に基づいてパーセンテージでのマージンが計算されるという事実から来ています。したがって、指定した上部マージンは、#navigation div (この場合はbody.

パーセンテージでのマージンのw3c仕様を見てください。

あなたの言いたいことはmargin-top: 90%、 #navigate の上部に、ビューポートの高さの 90% に等しいスペースを追加することだと思います。ブラウザーが行うことは次のとおりです: ビューポート幅の 90% に等しい #navigate の上部にスペースを追加します。

ブラウザのビューポートを正確に正方形にすると、90% がまさに望み通りの結果になることがわかります。ただし、より一般的なビューポートを長方形にすると、「高さのパーセンテージ」ではなく「幅のパーセンテージ」に従って配置がずれていることがわかります。

于 2013-05-24T07:24:13.930 に答える
0

パーセントを使用する代わりに、余白に Pixel を使用することをお勧めします。

于 2013-05-24T06:40:04.927 に答える