Comment créer une hauteur adaptative DIV

Lorsque nous aurons terminé le projet, nous rencontrerons tous l'effet de la création d'une hauteur adaptative DIV. Nous allons donc aujourd'hui vous montrer comment obtenir l'effet de la hauteur adaptative DIV dans deux situations.

Le premier type : la hauteur du DIV est adaptative lorsque le contenu d'une certaine hauteur est augmenté, et le DIV a une certaine hauteur minimale lorsque le contenu est petit

Le deuxième type ; : il n'y a pas de hauteur minimale, et le DIV est entièrement adaptatif en hauteur.

Ce qui suit présentera ces deux situations et solutions pour vous

Il y a une certaine hauteur minimale lorsque le contenu est ajouté, la hauteur sera adaptative. Lorsque le contenu est petit, le DIV. aura une certaine hauteur minimale - TOP

Il existe une boîte DIV avec une hauteur par défaut de 200px Lorsque le contenu de la DIV est redondant et dépasse la hauteur limitée, la DIV s'adapte à la hauteur Pure CSS+. DIV est requis, aucun JS n'est requis et il est compatible avec Firefox

1 Réponses et explications :

_hauteur:200px; /* note css : seul IE6 définit cet attribut, en supposant que la hauteur minimale est de 200 px, définissez la hauteur sur 200 px, IE6 augmentera automatiquement la hauteur définie une fois que le contenu dépasse */

min-height:200px; /* cssRemarque : la hauteur minimale du CSS est de 200px. Prend en charge tous les navigateurs, sauf IE6 */

Ce paramètre est compatible avec ie6, 7, 8, 9, 10, Firefox, etc.

2. Code de paramétrage spécifique :

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

3. Cas de coexistence de hauteur minimale CSS et de hauteur adaptative

Nous mettons en place 2 boîtes DIV, la hauteur minimale est de 200 px. Lorsqu'il y a moins de contenu, la hauteur minimale de la boîte DIV est de 200 px. Lorsqu'il y a plus de contenu que ne peut contenir la hauteur, la boîte DIV s'adapte à sa hauteur afin de faciliter. observation et analyse de référence, nous définissons uniformément la largeur à 100 px et une bordure CSS noire de 1 px.

Le code CSS est le suivant :

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>

Hauteur adaptative CSS par défaut

Lorsque nous ne définissons pas de hauteur fixe pour un DIV ou ne définissons pas de hauteur CSS style, sa boîte DIV est par défaut auto-Adapter à la hauteur.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php autres articles liés !

Lecture connexe :

Analyse des dernières questions d'entretien JS

Compilation de méthodes courantes de js natif

La dernière analyse des questions d'entretien JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!