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!