Voici un exemple du problème en question:
http://dev.madebysabotage.com/playground/overlay.html
Vous voyez qu'il y a une superposition grise sur toute la page, mais si vous faites défiler vers le bas, le contenu sous la page chargée initiale n'a pas la superposition.
J'ai un #overlay
div et il semble qu'il ne garde pas la hauteur de 100% pendant le défilement, donc essayez de comprendre comment retirer cela.
Voici la source complète:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Overlay</title>
<style type="text/css">
html {
height: 100%;
min-height: 100%;
}
body {
height: 100%;
min-height: 100%;
font-family: Georgia, sans-serif;
}
#overlay {
background: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}
header, section, footer {
width: 800px;
margin: 0 auto 20px auto;
padding: 20px;
background: #ff0;
}
section {
min-height: 1500px;
}
</style>
</head>
<body>
<div id="overlay"></div>
<header>
<h1>Header</h1>
</header>
<section>
<p>Here's some sweet content</p>
</section>
<footer>
<p>Here's my footer</p>
</footer>
</body>
</html>
position: fixed;
sur la superposition.
Changement #overlay
position:absolute
à position:fixed
Cela se produit car le #overlay
position: absolute
est relatif à <html>
et en utilisant ses dimensions, qui ne sont que la hauteur de la fenêtre.
Pour vous assurer que le #overlay
utilise les dimensions de la page entière, vous pouvez utiliser position: relative;
sur le <body>
(mais vous devrez supprimer le min-height: 100%
et height: 100%
sur le <body>
d'abord car cela lui fait utiliser la taille de la fenêtre d'affichage). Le #overlay
utilisera alors le <body>
dimensions et remplissez la page entière.