J'ai 2 divs qui ont une hauteur de 50% empilée comme une rangée, sur une page qui est divisée en 2 couleurs.
Cependant, sur des écrans plus petits, l'utilisateur doit faire défiler la conception, ce qui brise la conception. Je veux que les deux plages de 50% pour remplir l'ensemble de la page Web. P>
p>
<div class="height-50 first-50"> text </div> <div class="height-50 second-50"> text </div>
3 Réponses :
Vous pouvez utiliser le ciote de w3schools.com et ajoutez ce que vous voulez tout ce que vous voulez VH pour régler la hauteur lorsque la fenêtre redimensionne
VW par rapport à 1% de la largeur de la fenêtre
VH par rapport à 1% de la hauteur de la fenêtre
Voici un exemple rapide qui fonctionne dans le scénario limité que j'ai testé pour.
Avec positionnement relatif, il ne va que remplir autant d'espace que nécessaire. Vous avez probablement besoin de positionnement / dimensionnement absolu pour la forcer à remplir les régions dont vous avez besoin. Toutefois, notez que les autres éléments de votre page (généralement relativement ou par défaut statique positionnés) ne seront pas au courant du tout et les chevaucheront tout simplement. P>
Donc, si vous recherchez une chose de fond là où elle remplit toujours 50% / 50% quel que soit le contenu en haut, cette approche de positionnement absolue pourrait suffire. Si vous avez besoin de ces deux zones pour suivre le flux de la page et respectez les éléments autour d'eux, ce n'est pas le cas. p>
p>
<div class="height50 first50">
text
</div>
<div class="height50 second50">
text
</div>Exposer sur une réponse d'un utilisateur précédent, utiliser VH est un moyen d'obtenir la hauteur de l'appareil avec un support presque parfait dans les navigateurs modernes. Vous pouvez diviser les deux divs en 50vh et il redimensionnera en conséquence. CCS-Tricks a une autre information sur ce sujet!
p >
<div class="height-50 first-50"> text </div> <div class="height-50 second-50"> test </div>