css - css の高さの違い: 100% と高さ: 自動

Question

height:100%インタビューで「cssとの違いは何height:autoですか?」という質問を受けました。

誰でも説明できますか？

Answer 1

height: 100%親コンテナーの 100% の高さを要素に与えます。

height: auto要素の高さがその子の高さに依存することを意味します。

次の例を検討してください。

高さ: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv持つつもりですheight: 50px

高さ: 自動

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv持つつもりですheight: 10px

Answer 2

の100% の高さは、おそらくブラウザの内部ウィンドウの高さです。これは、その親であるページの高さだからです。auto高さは、を含めるために必要な最小の高さになります。

Answer 3

デフォルトはheight: autoブラウザにありますがheight: X%、含まれるブロックのパーセンテージで高さを定義します。