Ça fonctionne toujours pour moi:

       
some content
  

C’est probablement la solution la plus simple à ce problème. Seulement besoin de définir quatre atsortingbuts CSS (bien que l’un d’eux ne soit que pour rendre l’IE stupide heureux).

Ceci est ma solution pour créer un div plein écran, en utilisant un css pur. Il affiche un div plein écran qui est persistant lors du défilement. Et si le contenu de la page tient sur l’écran, la page n’affiche pas de barre de défilement.

Testé sous IE9 +, Firefox 13+, Chrome 21+

         
Selectable text
 
 This paragraph is located below the overlay, and cannot be selected because of that :)
   

C’est le moyen le plus stable (et le plus facile) de le faire, et cela fonctionne dans tous les navigateurs modernes:

 .fullscreen { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; background: lime; /* Just to visualize the extent */ } 

 
 Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.  

La meilleure façon de le faire avec les navigateurs modernes consisterait à utiliser les longueurs de pourcentage de la fenêtre de visualisation , pour revenir à des longueurs de pourcentage régulières pour les navigateurs qui ne prennent pas en charge ces unités .

Les longueurs en pourcentage de la fenêtre d’affichage sont basées sur la longueur de la fenêtre d’affichage. Les deux unités que nous utiliserons ici sont vh (viewport height) et vw (viewport width). 100vh est égal à 100% de la hauteur de la fenêtre et 100vw est égal à 100% de la largeur de la fenêtre.

En supposant le code HTML suivant:

Vous pouvez utiliser les éléments suivants:

 html, body, div { /* Height and width fallback for older browsers. */ height: 100%; width: 100%; /* Set the height to match that of the viewport. */ height: 100vh; /* Set the width to match that of the viewport. */ width: 100vw; /* Remove any browser-default margins. */ margin: 0; } 

Voici une démo de JSFiddle qui montre l’élément div remplissant à la fois la hauteur et la largeur de l’image résultante. Si vous redimensionnez le cadre de résultat, l’élément div est redimensionné en conséquence.

Je n’ai pas IE Josh, pourriez-vous s’il vous plaît tester cela pour moi. Merci.

       
 
hellomoto
 
   

Ce que j’ai trouvé de la meilleure façon élégante est le suivant, le plus compliqué ici est de faire en sorte que la position: fixed du div position: fixed .

 .mask { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; } 

      
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
Whatever it takes
 
   

Remplacez l’élément body par un flex container et le div par un flex item :

 body { display: flex; height: 100vh; margin: 0; } div { flex: 1; background: tan; } 

C’est le truc que j’utilise. Bon pour les conceptions réactives. Fonctionne parfaitement lorsque l’utilisateur essaie de jouer avec le redimensionnement du navigateur.

       
some content
  

Malheureusement, la propriété height de CSS n’est pas aussi fiable qu’elle devrait l’être. Par conséquent, Javascript doit être utilisé pour définir le style de hauteur de l’élément en question à la hauteur de la fenêtre utilisateur. Et oui, cela peut se faire sans positionnement absolu …

         
 
Test