cssの高さの違い：100％vs高さ：自動

167

インタビューで「CSS height:100%との違いは何height:autoですか？」と質問されました。

誰でも説明できますか？

css

— ゴウシカン
ソース

236

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

— マニッシュミシュラ
ソース

5

'height：auto #innerDivの場合は10px + the size it needs for its own content-このjsfiddleを

— BornToCode

@マニッシュミシュラ：最高のレスポンシブデザインとは何ですか？子要素またはコンテナ要素の高さを設定し、他の要素にその高さを導出させますか？

— John Strood

@Djack、それはすべて、さまざまな画面でデザインに期待する外観、感触、および動作に依存するため、CSSを記述します。のような一般的なグローバルルールはありませんsetting the height of the child element or the container element。特定の一貫性を守り、重複を避け、再作業を減らし、一般的なレイアウトをグループ化すれば、設計を達成するために必要なことは何でもできます。簡単に言うと、あなたの作品にはシステム/パターンがなければならないので、読みやすく、変更しやすく、そしてもちろん、作品がshdされているという事実

— Manish Mishra

2

自動について考える良い方法は、あなたが高さを「設定解除」しているということだと思います-それは設定されていないようなものです。

— niico 2016年

1

上記でBornToCodeが共有したフィドルを変更してauto、要素がそのコンテンツとその子のコンテンツの両方に対応するように成長することをより明確にするために変更しました。対照的に、固定高さの値は、宣言された高さに収まらないコンテンツを拡大（または表示）しません。jsfiddle.net/m3f8y6xr/1この回答は、要素がそれ自体のテキストであろうと、子のコンテンツであろうと、すべてのコンテンツを含むように成長することを不明確にするほど十分に語られていません。もちろん、それ自体のテキストも子供であると主張することができます。これにより、動作を視覚的に確認できます。

— SherylHohman

5

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

— ロヒト・アザド
ソース

3

親要素が、ブラウザのウィンドウのサイズに合わない定義された高さを持つ要素である場合、これは必ずしも正しくありません

— goonerify

1

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

— ヴァヒドヘイダリンジャド
ソース

0

height：100％は、親コンテナに指定された高さプロパティがある場合は機能し、それ以外の場合は機能しません

— チュクウェメカ
ソース