En train d'apprendre récemment le HTML et le CSS, je souhaite imiter la page d'accueil de Baidu. J'ai constaté que la distance vide entre cette partie du champ de recherche et les autres éléments au-dessus et en dessous peut changer en fonction de la taille de la fenêtre. J'espère que cet article pourra aider tout le monde.
Mise en œuvre de l'effet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直伸缩</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
height: 100%;
}
.content{
min-width: 810px;
min-height: 600px;
height: 100%;
border: 1px dashed green;
}
.wrap{
width: 100%;
height: 191px;
border: 1px solid blue;
position: relative;
top: 38.2%;
}
.wrap-content{
width: 100%;
height: 191px;
background-color: red;
position: relative;
top: -191px;
}
</style>
</head>
<body>
<p class="content">
<p class="wrap">
<p class="wrap-content">
</p>
</p>
</p>
</body>
</html>Analyse
Principe d'utilisation :
Méthode de calcul de la valeur en pourcentage : Réelle Valeur = largeur et hauteur * valeur en pourcentage de l'élément ancêtre avec la largeur et la hauteur déterminées. Par défaut, la largeur des éléments au niveau du bloc est de 100 % et la hauteur est calculée en fonction du contenu. Ainsi, si l'élément ancêtre n'a pas de hauteur déterminée, alors la valeur en pourcentage ne peut pas être déterminée et sa valeur sera fixée à 0.
Si la hauteur de l'élément html est définie sur height : 100 % ; alors la hauteur de l'élément html changera avec la hauteur de la fenêtre.
Recommandations associées :
À propos de la fonctionnalité relative en CSS
L'attribut position, centrage horizontal absolu et relatif dans le style CSS
Dans l'attribut css position : la différence entre absolu et relatif
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
