Maison > Article > interface Web > Comment définir la hauteur d'un élément pour qu'il soit adaptatif en CSS
La méthode de définition de la hauteur adaptative des éléments en CSS consiste à utiliser le positionnement et le remplissage des éléments pour rendre des éléments spécifiques hautement adaptatifs. Le code est [position : relative;padding : 60px 0 0 ;].
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.
Comment définir la hauteur des éléments de manière adaptative à l'aide de CSS :
Vous pouvez utiliser le positionnement des éléments + le remplissage pour rendre des éléments spécifiques hautement adaptatifs.
style css :
html,body{ height:100%; margin:0; padding:0; } .wrap { height:100%; box-sizing: border-box ; position: relative; padding: 60px 0 0; } .header { height: 60px; position: absolute; top: 0; width: 100%; } .content { height:100%; }
html :
<div class="wrap"> <div class="header"> 我是头部信息 </div> <div class="content"> 我要高度自适应 </div> </div>
L'effet est le suivant :
Recommandation de didacticiel connexe : Tutoriel vidéo CSS
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!