web-dev-qa-db-fra.com

Comment faire une div couvrir tout l'écran

J'ai une question. 

Je l’ai eu jusqu’à présent:  enter image description here

Je veux fondamentalement que la div en surbrillance couvre l'écran de votre appareil, quelle que soit sa taille. Maintenant, je vois 2 divs différents quand j'ouvre ceci sur mon téléphone. Je veux seulement voir celui qui est en surbrillance. Comment est-ce que je réalise ceci? 

Merci d'avance, Kevin

htmlcssresponsive
7
Kevin

Vous pouvez utiliser la hauteur de la fenêtre d'affichage comme valeur de votre hauteur: 

.main {
    height: 100vh;
    background-color: green;
}
<div class="main">
  CONTENT
</div>

Utiliser height: 100vh signifie que l'élément en question correspond toujours à 100% de la hauteur de la fenêtre de visualisation d'un utilisateur/devie.

Plus d'infos: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

12
David Wilkinson

Vous pouvez probablement le faire en définissant la position de la div que vous voulez faire en plein écran, sur absolute, puis appliquez le code CSS ci-dessous.

top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;

Ainsi, le css final serait comme suit

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
}
3
saugandh k

Vous pouvez utiliser position: absolute; ou position: fixed.
Utilisez absolute pour le faire simplement couvrir toute la page.
Utilisez fixed pour le positionner par défaut. Si vous utilisez fixed, même si votre page contient plus de 100%, vous ne pouvez pas faire défiler l'écran vers le bas pour voir autre chose .

CSS

div.any {
   position: absolute; /*position: fixed;*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*You can add anything else to this like image, background-color, etc.*/
}

HTML

<div class="any"></div>
2
Advaith