Comment faire un <div> toujours en plein écran?
Peu importe comment son contenu est comme.
Est-il possible de faire cela?
Ça fonctionne toujours pour moi:
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">some content</div>
</body>
C'est probablement la solution la plus simple à ce problème. Il suffit de définir quatre attributs CSS (bien que l’un d’eux ne soit que pour rendre heureux stupid IE).
Voici ma solution pour créer une div en plein écran, en utilisant des fichiers css purs . Elle affiche une div en plein écran qui persiste dans le défilement . Et si le contenu de la page tient à l'écran, la page ne montrera pas de défilement. -bar.
Testé dans IE9 +, Firefox 13+, Chrome 21+
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> Fullscreen Div </title>
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10;
}
</style>
</head>
<body>
<div class='overlay'>Selectable text</div>
<p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>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 */
}<div class="fullscreen">
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.
</div>Testé pour fonctionner dans Firefox, Chrome, Opera, Vivaldi, IE7 + (basé sur l'émulation dans IE11).
La meilleure façon de faire cela avec les navigateurs modernes serait d'utiliser Viewport-percent Lengths , en revenant à des longueurs normales en pourcentage pour les navigateurs ne supportant pas ces unités .
Les longueurs en pourcentage de la fenêtre de visualisation sont basées sur la longueur de la fenêtre de visualisation elle-même. Les deux unités que nous allons utiliser ici sont vh (hauteur de la fenêtre) et vw (largeur de la fenêtre). 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 que le HTML suivant:
<body>
<div></div>
</body>
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 JSFiddle qui montre l'élément div qui remplit à la fois la hauteur et la largeur du cadre de résultat. 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.
<html>
<head>
<title>Hellomoto</title>
<style text="text/javascript">
.hellomoto
{
background-color:#ccc;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
}
body
{
background-color:#ff00ff;
padding:0px;
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
.text
{
background-color:#cc00cc;
height:800px;
width:500px;
}
</style>
</head>
<body>
<div class="hellomoto">
<div class="text">hellomoto</div>
</div>
</body>
</html>
Ce que j’ai trouvé le meilleur moyen élégant est comme suit, le plus difficile ici est de créer le position: fixed de div.
.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;
}<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<div class="mask"></div>
</body>
</html> 
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;
}<div></div>C'est le truc que j'utilise. Bon pour les conceptions réactives. Fonctionne parfaitement lorsque l'utilisateur tente de jouer avec le redimensionnement du navigateur.
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">some content</div>
</body>
Voici la solution la plus courte, basée sur vh. Veuillez noter que vh n'est pas pris en charge dans certains navigateurs plus anciens .
CSS:
div {
width: 100%;
height: 100vh;
}
HTML:
<div>This div is fullscreen :)</div>