BinaryDevelop
  1. ホーム
  2. html

[解決済み】パーセンテージの高さ HTML 5/CSS

2022-04-13 04:11:52

質問

を設定しようとしています。 <div> をCSSで特定の高さに設定しても、中のコンテンツと同じ大きさのままです。HTML 5の <!DOCTYTPE html> しかし、それは動作します。 <div> は、希望通りページ全体を占有しています。このページを検証したいのですが、どうしたらよいでしょうか？

私は、このCSSを <div> というIDを持つ page : 

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

解決方法は？

<ブロッククオート

CSSでdivの高さをある割合に設定しようとしています。

何パーセント？

高さのパーセンテージを設定するには、その親要素(*)が明示的に高さを持つ必要があります。これはかなり自明なことで、もし高さを auto しかし、コンテンツ自体の高さが親に対するパーセンテージで表現されている場合、ちょっとしたキャッチボールをすることになります。ブラウザはあきらめて、コンテンツの高さを使用するようになります。

そのため、div の親には明示的に height プロパティを使用します。高さをパーセントで指定することもできますが、それでは問題が次のレベルに進んでしまいます。

div の高さをビューポートの高さに対するパーセンテージにしたい場合、div のすべての祖先、たとえば <html> と <body> を持つ必要があります。 height: 100% そのため、divに至るまで明示的なパーセンテージの高さの連鎖が存在します。

(*: または、divが位置決めされている場合、「含むブロック」、それも位置決めされる最も近い祖先である。)

あるいは、すべてのモダンブラウザとIE>=9は、ビューポートの高さを基準とした新しいCSS単位( vh ) とビューポート幅 ( vw ): 

div {
    height:100vh; 
}

についてはこちらをご覧ください。 詳細情報 .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します