CSS を使用して高さ適応の問題を解決する

適応性の高い問題を解決するために js を使用することには非常に抵抗があります。それは、メンテナンスが簡単ではなく、十分に自然ではないためです。しかし、以下で説明する例のように、純粋な CSS を使用するのは簡単ではありません。

要件:

1. この四角形の高さはブラウザウィンドウの高さと同じであり、垂直スクロールバーは表示されません

2. 緑色の部分の高さは固定です (例: 50px)。紫色の部分が残りの高さを埋めます

HTML 構造今のところ:

nav

content

1.

html、body {

height: 100%;

margin: 0px;

padding: 0px;

}を見てください。

#main {

background-color ) Yes 最も厄介なことは、一般的に height:100% を考えることですが、100% は親要素の高さに基づいていることです。たとえば、親要素の高さです。は 300px、#nav は 50px を占め、#content は 250px であるはずですが、高さ: 100% と書かれていると、結果として #content の高さも 300% になり、要件で許可されていない垂直スクロール バーが表示されます。 。

もちろん、この種の問題を解決するために js を使用するのは非常に簡単ですが、今回は単に js を使用したくないので、以下で試してみましょう:

この要件は本当に私を崩壊させました。 、しかし、どれも信頼性に欠けると感じ、最終的に次のような理想的な効果に最も近い方法を見つけました

html, body {

height: 100%;

margin: 0px;

パディング: 0px;

}

#main {

背景色: #999;

高さ: 100%;

}

#nav {

背景色: #85d989;

幅: 100 %;

height: 50px;

float : left;

}

#content {

background-color: #cc85d9;

height:100%;

}

ここではフローティングが使用されており、もちろん、単にテキストや画像を表示するだけであれば、この方法で十分ですが、たとえば、js を使用して何らかの操作を行いたい場合は、#content 内にドラッグする必要がある要素があります。そうでない場合は、#nav によってブロックされてしまいます。悲劇的なのは、私にはこのニーズがあるため、引き続き努力を続けることです。

専門家からのアドバイスと一日の試行錯誤を経て、ついに解決策を見つけました

#nav {

background-color: #85d989;

width: 100%;

height: 50px;

}

#content {

の背景色: #cc85d9;

幅: 100%;

位置: 絶対;

上: 50px;

下: 0px;

左: 0px ;

}

ポイントは上下を一緒に使うことです。これは非常に型破りな使い方で、ボックスモデルの領域を強制的に定義できます。

以上がCSS を使用して高さ適応の問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。