ホームページ > 記事 > ウェブフロントエンド > CSS のみを使用して Div をページの高さ 100% に拡大できますか?
CSS のみを使用して Div をページの高さ 100% に拡大できますか?
- Barbara Streisandオリジナル
- 2024-10-30 23:48:29748ブラウズ
CSS で Div をページの高さ 100% に拡大する
Web ページの美しさと機能を向上させるには、多くの場合、Web ページの特定の部分を占めるように要素を正確に配置する必要があります。ページ。一般的な要件の 1 つは、ナビゲーション メニューまたはサイドバーをビューポートの高さ全体に広げ、スクロールしたときに表示される領域を超えて拡張することです。
JavaScript なしで実行できますか?
そのような機能が HTML と CSS のみを使用して実現できるかどうかという疑問が開発者によって提起されています。答えは、完全にイエスです。
解決策
この問題を解決するには、次の CSS の変更を検討してください:
- z- を削除します。
- 全高の列の場合は左または右を省略します。
- 全幅の行の場合は上または下を除外します。
解決策を示す CSS コードの例を次に示します。
<code class="css">html {
min-height: 100%; /* ensures minimum viewport height */
position: relative;
}
body {
height: 100%; /* matches the height of the HTML element */
}
#cloud-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}</code>
付随する HTML コード:
<code class="html"><!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html></code>
根拠
html {最小高さ: 100%; Position:relative;} 宣言により、cloud-container div が HTML レイアウト内に残り、正確な高さの計算が可能になります。
以上がCSS のみを使用して Div をページの高さ 100% に拡大できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。