高さ:100% と高さ:自動の違いは何ですか?

最近、フロントエンドページを作成するときにheight:100%;overflow:hidden;を使用しているのですが、一部のブラウザには不可解な素晴らしい問題があります。 height :auto に変更すれば問題ありません。Baidu はこの問題を詳しく調査したことはありません。

今日も同じ問題が発生しました。Baiduをよく見て、グループの友達に教えてもらった結果、ようやく理由が分かり、記録しました。

height:auto は、ブロック内のコンテンツに応じて高さを自動的に調整することを指します。
高さ: 100% は、親ブロックの高さを基準にして定義された高さを指します。つまり、高さは、それに最も近い親レイヤーの高さに従って、定義された高さで定義されます。

コンテンツの高さに応じて自動拡張します。 100% は親要素の高さに基づいて決定されます。例:

<div style="height:100px;width:200px;">      <div style="height:auto;width:100px;float:left;">
这个容器的高度是随里面的内容的高度而定
</div>

<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px</div> </div>

たとえば、テーブルが別のテーブルの中にある場合、外側のテーブルの高さが 100 で、内側のテーブルが自動の場合、テーブル内に何もなければ、高さはありません。テーブル内のコンテンツの高さに依存し、100% の場合、内部にコンテンツがあるかどうかに関係なく、外側のテーブルと同じ高さになります

以上が高さ:100% と高さ:自動の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。