Utiliser CSS pour résoudre les problèmes d'adaptation à la hauteur

Je suis très réticent à utiliser js pour résoudre le problème hautement adaptatif car ce n'est pas facile à maintenir et pas assez naturel. Cependant, il n'est pas facile d'utiliser du CSS pur, comme l'exemple dont je parlerai ci-dessous.

Exigences :

1. La hauteur de ce rectangle est la même que la hauteur de la fenêtre du navigateur, et les barres de défilement verticales ne peuvent pas apparaître

2. la partie verte est fixe, par exemple 50px

3. Remplissez la partie violette avec la hauteur restante

La structure HTML est la suivante :

nav

content

Regardez d'abord 1.

html, corps {

hauteur : 100 %;

marge : 0px;

padding : 0px;

}

#main {

couleur de fond : #999;

hauteur : 100 % ;

}

L'exigence 2 est également très simple :

#nav {

background-color : #85d989;

hauteur : 50px;

>

Exigence 3 Oui Le plus gênant est que généralement nous penserons à la hauteur : 100 %, mais 100 % est basé sur la hauteur de l'élément parent, par exemple la hauteur de. l'élément parent fait 300 px, #nav occupe 50 px et #content devrait être 250 px, mais écrit en hauteur : 100 %, le résultat est que la hauteur de #content devient également 300 % et une barre de défilement verticale apparaît qui ne l'est pas permis par les exigences.

Bien sûr, il est assez simple d'utiliser js pour résoudre ce genre de problème, mais cette fois je ne veux tout simplement pas utiliser js, alors essayons ci-dessous :

Cette demande me fait vraiment m'effondrer, regarde Cela semblait simple, mais après avoir essayé plusieurs méthodes, elles ne semblaient toutes pas fiables. Finalement, j'ai trouvé une méthode qui se rapproche le plus de l'effet idéal, comme suit

html, body {

.

hauteur : 100 %;

marge : 0px;

remplissage : 0px;

}

#main {

couleur d'arrière-plan : #999;

hauteur : 100 %;

}

#nav {

couleur d'arrière-plan : #85d989;

largeur : 100 %;

hauteur : 50px;

flotteur : gauche;

}

#content {

background-color: #cc85d9;

height:100%;

}

Floating est utilisé ici, et le résultat final semble parfait, bien sûr, si vous le faites simplement. afficher du texte et des images, ce type de méthode est suffisant, mais si vous souhaitez utiliser js pour effectuer une interaction, par exemple, s'il y a un élément qui doit être glissé à l'intérieur de #content, sa valeur minimale supérieure ne doit pas être 0 , sinon il sera bloqué par #nav La tragédie, c'est moi. Il y avait un tel besoin, alors j'ai continué à faire de gros efforts.

Après une journée d'essais et quelques conseils d'experts, j'ai enfin trouvé la solution j'ai fondu en larmes

#nav {

background-color: #85d989;

largeur : 100 %;

hauteur : 50px;

}

#content {

couleur d'arrière-plan : #cc85d9;

largeur : 100 %;

position : absolue;

haut : 50px;

bas : 0px;

gauche : 0px;

>

Le point clé est d'utiliser le haut et le bas ensemble. C'est une utilisation très non conventionnelle qui peut définir avec force la zone du modèle de boîte, ce qui est incroyable

.

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!