ホームページ > 記事 > ウェブフロントエンド > DIVの高さを適応させる方法

DIVの高さを適応させる方法

php中世界最好的语言オリジナル: 2017-11-28 10:46:1910109ブラウズ

プロジェクトが完了すると、DIV 適応高さの効果に遭遇することになるので、今日は 2 つの状況で DIV 適応高さの効果を実現する方法を説明します。

最初のタイプ: 特定の高さのコンテンツが増加すると DIV の高さが適応され、コンテンツが小さい場合は DIV に特定の最小高さが設定されます。

2 番目のタイプ: 最小の高さはありません。 DIV は高さに完全に適応します。

以下はこれら 2 つの状況と解決策の紹介です

コンテンツが追加されると、高さは適応されます。DIV には一定の最小高があります - TOP

。

DIV ボックスがあり、DIV 内のデフォルトの高さは 200px です。コンテンツが冗長で制限された高さを超える場合、DIV 適応高さには純粋な CSS+DIV の使用が必要です。JS は必要ありません。Firefox ブラウザと互換性があります。

1. 答えと説明:

_height:200px; /* css 注: この属性を設定するのは最小の高さであり、コンテンツがそれを超える場合の高さは 200px であると仮定します。 , IE6 は設定された高さを自動的に上げます*/

min-height:200px; /* cssComment : CSS の最小の高さは 200px で、IE6 を除くすべてのブラウザをサポートします*/

この設定は互換性がありますie6、7、8、9、10、Firefox など

2. 特定の設定コード:

div{ 
_height:200px; 
min-height:200px 
/* css 注释：两个放置不分前后顺序，兼容所有浏览器 */ 
}

3. CSS の最小高さとアダプティブ高さの共存の場合

2 つの DIV ボックスを設定します。最小の高さは 200px です。コンテンツが少ない場合、DIV ボックスの最小の高さは 200px です。コンテンツが高さに収まりきらない場合、DIV ボックスの適応高さは、観察と参照分析を容易にするために、一律に 100px に設定されます。そして黒の 1px CSS 境界線。

CSS コードは次のとおりです:

div{_height:200px; min-height:200px; border:1px solid #000; width:100px} 
/* css注释：设置最小高度，border边框，宽度 */ 
HTML代码片段：
<div>200高度能装下这点内容，设置最小高度200px</div> 
<div>设置最小高度200px<br /> 
而内容多，超出200px高度限制，DIV自适应高度<br /> 
<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位 
</div>

CSS のデフォルトの適応高さ

DIV に固定高さを設定しない場合、または CSS 高さスタイルを設定しない場合、その DIV ボックスはデフォルトで適応高さに設定されます。

これらの事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の関連記事に注目してください。