HTML 5/CSS 高さパーセントのヒント
P粉135292805
2023-08-20 19:15:25
<p>CSS で <div> を特定のパーセンテージの高さに設定しようとしていますが、その中のコンテンツと同じサイズのままです。ただし、HTML 5 の <!DOCTYTPE html> を削除すると、正常に動作し、予想どおり <div> がページ全体を占めます。ページが検証に合格するようにしたいのですが、どうすればよいですか? </p>
<p>この CSS は <div> にあり、その ID は <code>page</code>: </p>
<pre class="brush:php;toolbar:false;">#page {
パディング: 10px;
背景色: 白;
高さ: 90% !重要;
}</pre>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
また、
リーリー<html>要素と<body>要素の高さを設定する必要があります。そうしないと、コンテンツに適合するだけの大きさになってしまいます。 ＃＃＃例えば＃＃＃：＃＃＃パーセンテージは何ですか?
高さのパーセンテージを設定するには、その親要素 (*) に明示的な高さが必要です。これは非常に明白です。高さを
autoのままにすると、ブロックはそのコンテンツの高さを取得します...ただし、コンテンツ自体の高さが親要素のパーセンテージとして表現される場合、あなたはちょっとしたジレンマに陥っています。ブラウザはあきらめて、コンテンツの高さをそのまま使用します。したがって、div の親要素には明示的な
height属性が必要です。必要に応じて高さをパーセンテージで指定することもできますが、それは問題を次のレベルに進めるだけです。div の高さをビューポートの高さのパーセンテージにしたい場合は、
<html>および<body>を含む div のすべての祖先要素が必要になります。 ,height: 100%が必要なので、div にチェーンされた明示的な高さのパーセンテージが存在します。(*: または、div が配置されている場合は、「包含ブロック」、同様に配置されている最も近い祖先要素。)
あるいは、すべての最新のブラウザーと IE 9 以降では、ビューポートの高さ (
リーリーvh) とビューポートの幅 (vw) に関連する新しい CSS ユニットがサポートされています。ここをご覧ください詳細情報。