Peu importe comment est son contenu.
Est-il possible de le faire ?
@AdamHarte Pourquoi cela ne fonctionne-t-il pas si vous supprimez le sélecteur 'html' du CSS ? body { height : 100% ; margin : 0 ; }
Réponses
Trop de publicités?
Adam Harte
Points
6449
Cela marche 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 serve qu'à rendre IE heureux).
@P.Alex Math ! Si la hauteur de vos balises HTML s'étire pour s'adapter à son contenu, alors la hauteur du corps est de 100% de son parent, alors vous ne le forcerez pas à 100% de l'espace disponible.
Mihai Cicu
Points
181
Voici ma solution pour créer un div plein écran, en utilisant du css pur. Elle affiche une div plein écran qui est persistante 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é 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>
awe
Points
9697
Il s'agit de la méthode la plus stable (et la plus simple), et elle 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).
Cela fonctionne mieux si vous utilisez les éléments suivants : position: fixed; top: 0; left: 0; et maintenant la partie qui est différente : width: 100%; height: 100%; . En fait, cela fonctionne aussi parfaitement dans les anciens navigateurs.
Pourquoi est-il préférable d'utiliser la largeur et la hauteur plutôt que le bas et la droite ? Si vous utilisez la largeur et la hauteur, et que vous souhaitez également un rembourrage et/ou une bordure, vous devez également vous assurer que vous avez box-sizing: border-box; sinon vous obtiendrez une boîte plus grande qui entraînera un défilement. Voir este .
James Donnelly
Points
27085
La meilleure façon de le faire avec les navigateurs modernes serait d'utiliser Longueurs en pourcentage des fenêtres de visualisation en revenant à des pourcentages réguliers pour les navigateurs qui ne supportent pas ces unités .
Les longueurs en pourcentage des fenêtres d'affichage sont basées sur la longueur de la fenêtre d'affichage elle-même. Les deux unités que nous utiliserons 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 d'affichage, et 100vw est égal à 100 % de la largeur de la fenêtre d'affichage.
En supposant 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 un Démonstration de JSFiddle qui montre le div remplissant à la fois la hauteur et la largeur du cadre de résultat. Si vous redimensionnez le cadre de résultat, l'élément div se redimensionne en conséquence.
Tubbe
Points
423
Cela devrait fonctionner, bien que je n'aie pas IE pour le tester.
<html>
<head>
<title>Hellomoto</title>
<style type="text/css">
.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>
Je ne comprends pas ; vous codifiez en dur une hauteur de 800px sur le DIV. L'OP veut que ce soit dynamique.
Oh désolé, je n'avais pas vu qu'il s'agissait d'un absolu furtif (ou haut/gauche). C'est bon alors :)
5 votes
Il y a beaucoup d'excellentes réponses ici, mais je ne vois aucune mention de flexbox, alors j'ai pensé que je devais partager mes deux cents : Le fait que la division parent soit à 100 % est une chose, mais si le moment est venu de placer, d'arranger et de centrer du contenu dans cette division, vous voudrez examiner le système Flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox