高さについて:100%二三事_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

高さについて:100%二三事_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:01 PM

100 height

CSS height:100% の場合、名前が示すように、要素の高さは親要素の高さで自動的に埋められます。ただし、このスタイルは機能しない場合があります。マークダウンしてください。 ><

まず、次の CSS コードを見てください:

1 div {2     height: 100%;3 }

ログイン後にコピー

HTML コード:

1 <!doctype html>2 <html>3 <head></head>4 <body>5     <p>我的名字叫做甲基苯醌</p>6     <div></div>7 </body>8 </html>

ログイン後にコピー

div の高さ: 100% がまったく機能しないことは間違いありません (ありがたいことに私は単純に、div の高さは p の高さと同じになるだろうと考えていました。ボディの高さが p によって引き伸ばされるため、100% 機能します。はは、若すぎます、単純すぎます）、そして今振り返ってみると、 height: 100% は機能しません。完全に一貫した論理です。 body 要素の高さは高さを設定せずに適応するため、div の height:100% が有効になると、body の高さは確実に引き伸ばされます。このとき、body の高さ === div Height になります。 * 2、div スタイルは height:100% であり、これは我が国の科学的発展観と完全に矛盾しています。！！

次の CSS コードを追加するのも非常に簡単です:

1 htm, body {2     height: 100%;3 }

ログイン後にコピー

同様に、要素が絶対的で固定されていない場合、height:100% を機能させたい場合は、次の親要素が必要です。要素の高さを設定する必要があります。

それでは、親要素が高さを設定すると、なぜその子要素の height: 100% が有効になるのでしょうか?

当然のことですが、親要素の高さが設定された後は、子要素が height:100% に設定されても、その高さは固定値になります。また、ブラウザのオーバーフローのデフォルト値は増加しません。要素は表示されているため、機能します。

次に、子要素が絶対配置に設定されている場合、親要素が高さを設定していなくても、絶対配置された子要素は高さと幅を拡張しないため、子要素の height:100% が機能します。親要素の科学的な開発概念に沿っています。！！！

レスポンシブレイアウトを行ったことがある人なら誰でも、特定の div の高さを画面のサイズに合わせて変更したいことを知っていますが、この div にマージンまたはパディング効果も持たせたいと考えています。div が完全に配置された後、高さを設定します。 : 100% 、マージンまたはパディングを設定するときに厄介な問題が発生します。この解決策は次のコードで実現できます。。。。

えー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。