Faire un DIV couvrir 100% de viewport au lieu de 100% de Body

Mon message est en rapport avec http://www.thepostboard.net

Je dois faire la boîte noire qui couvre actuellement 100% de la couverture de la fenêtre d'affichage à la place de la page entière. Vous ne pourrez le remarquer que si votre écran a besoin d'une barre de défilement pour afficher le site Web, sinon il semble bien.

J'ai le div divisé en divisé pour:

position: absolute; height: 100%; width: 100%;

J'ai aussi le corps défini pour:

 height: 100%; margin: 0px 0px; padding: 0px; 0px;

Mais pour une raison quelconque sur mon ordinateur portable si je me déplace vers le bas, je vois le bord du DIV et rien n'est bloqué sous celui-ci.

Le but est de créer une boîte de lumière personnalisée pour le site. J'ai désactivé le Javascript qui diminue la boîte afin que vous puissiez voir l'effet.

Comment puis-je faire couvrir toute la page, pas seulement la fenêtre?

(Mon ordinateur portable est un 1366×768, donc vous pourriez le voir sur n'importe quoi avec une résolution en hauteur <= 760).

Le <div> doit être

 top: 0; left: 0; position: fixed; width: 100%; height: 100%; background-color: red;

Il restera ensuite dans les dimensions de la fenêtre et "voyagera" avec la barre de défilement.

Edit: il ne couvrira que l'intégralité de la fenêtre de visualisation si <body> a le style

 margin: 0; padding: 0;

Cette solution a bien fonctionné pour moi:

 #overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

Il n'est pas nécessaire de définir d'autres éléments, sauf le tag.

Essayez d'ajouter ce css:

 html { height: 100%; margin 0; }

 <!DOCTYPE html> <html> <head> <title>image background test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale = 1.0, user-scalable = no, maximum-scale=1"> <style> body{ margin:0; padding:0; width:100%; height:100%; max-width:100%; overflow-x:hidden; } article, aside, div, dt, figcaption, footer, form, header, hgroup, html, main, nav { display: block; width:auto; height:100%; } .main{ position:static;/* Don't Change - Positioning */ top:0; left:0; height:100%; max-height:100%; } .background{ position:absolute;/* Don't Change - Positioning */ top:0; left:0; right:0; bottom:0; background:url('images/beach.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; margin:0; } @media (min-aspect-ratio: 16/9){ .background{ position:absolute;/* Don't Change - Positioning */ width:100%; height:auto; /* actually taller than viewport */ background:url('images/beach.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; margin:0; } } @media (max-aspect-ratio: 16/9){ .background{ position:absolute;/* Don't Change - Positioning */ width:auto; /* actually wider than viewport */ height:100%; background:url('images/beach.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; margin:0; } } /* If supporting object-fit, overriding 'class="main"' default: */ @supports (object-fit: cover){ .background{ background:url('images/beach.jpg'); background-position:center center; margin:0; top: 0; left: 0; right: 0; object-fit: cover; } } section h1{ width:80%; height:auto; background:#ff0000; margin:20% auto; text-align:center; color:#ffffff; font-size:200%; font-weight:800; line-height:200%; } h2{ text-align:center; margin:0 auto; padding:20%; font-size:200%; line-height:100%; font-weight:800; } </style> </head> <body> <div class="main"> <div class="background"> <section> <h1>Image fits to viewport</h1> </section> </div> </div> <h2>Some Text Here to display that image<br>is fixed toviewport</h2> </body> </html>