Comment rendre une <div> toujours en plein écran?

170

Peu importe à quoi ressemble son contenu.

Est-il possible de faire cela?

html css responsive Masque
la source
2
Il y a beaucoup de bonnes réponses ici, mais je ne vois aucune mention de flexbox, alors j'ai pensé partager ces 2 cents: avoir cette div parent à 100% est une chose, mais si le moment est venu de mettre, arranger , et centrez du contenu dans cette div, vous voudrez regarder flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox
ArleyM

Réponses:

146

Ç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 IE heureux).

Adam Harte
la source
1
@AdamHarte Pourquoi cela ne fonctionne pas si vous supprimez le sélecteur 'html' du CSS? → corps {hauteur: 100%; marge: 0; }
Alex Prut
2
@ P.Alex Math! Si la hauteur de vos balises HTML s'étire pour s'adapter à son contenu, alors la hauteur du corps correspond à 100% de son parent, vous ne la forcerez pas à 100% de l'espace disponible.
Adam Harte
1
Je viens de l'essayer dans wpf en utilisant cefsharp chrome et cela fonctionne :)
adminSoftDK
107

C'est ma solution pour créer un div plein écran, en utilisant du css pur. Il affiche un div plein écran qui persiste lors du défilement. Et si le contenu de la page correspond à l'écran, la page n'affichera 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>
Développer l'extrait

Mihai Cicu
la source
58

C'est le moyen le plus stable (et le plus simple) 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>
Développer l'extrait

Testé pour fonctionner dans Firefox, Chrome, Opera, Vivaldi, IE7 + (basé sur l'émulation dans IE11).

admiration
la source
1
Il fonctionne mieux si vous utilisez ce qui suit: position: fixed; top: 0; left: 0;et maintenant la partie qui est différente: width: 100%; height: 100%;. Cela fonctionne également parfaitement dans les navigateurs plus anciens.
Aart den Braber
1
Pourquoi est-il préférable d'utiliser la largeur et la hauteur plutôt que d'utiliser le bas et la droite? Si vous utilisez la largeur et la hauteur, et que vous voulez également un remplissage 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 provoquera le défilement. Regarde ça .
awe
31

La meilleure façon de le faire avec les navigateurs modernes serait d'utiliser les longueurs en pourcentage de la fenêtre , en revenant aux longueurs en pourcentage normales pour les navigateurs qui ne prennent pas en charge ces unités .

Les longueurs en pourcentage de la fenêtre sont basées sur la longueur de la fenêtre 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). 100vhest égal à 100% de la hauteur de la fenêtre et 100vwest égal à 100% de la largeur de la fenêtre.

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 une démonstration de JSFiddle qui montre l' divélément remplissant à la fois la hauteur et la largeur du cadre de résultat. Si vous redimensionnez le cadre de résultat, l' divélément est redimensionné en conséquence.

James Donnelly
la source
18

Je n'ai pas IE Josh, pourriez-vous s'il vous plaît tester ceci 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>
Tubbe
la source
vous n'avez pas besoin de définir les largeurs à 100%
Adam Harte
Je ne comprends pas; vous codez en dur une hauteur de 800px sur le DIV. Le PO veut que ce soit dynamique.
Josh Stodola
Oh désolé, je n'ai pas vu cet absolu furtif là-dedans (ou en haut / à gauche). Eh bien c'est bien alors :)
Adam Harte
En remarque, vous voudrez peut-être utiliser à la position: fixedplace si la page peut défiler, mais sachez
luiges90
1
J'ai entendu dire qu'il existe des moyens plus modernes de résoudre ce problème. @Tubbe savez-vous si c'est vrai?
bzlm
8

Ce que j'ai trouvé la meilleure manière élégante est comme suit, le plus truc ici est de faire le div's 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;
}
<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>
Développer l'extrait

La démo du masque

Jeff Tian
la source
8

Changez l' bodyélément en a flex containeret le diven a flex item:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}
<div></div>
Développer l'extrait

Mori
la source
8

Voici la solution la plus courte, basée sur vh. Veuillez noter que ce vhn'est pas pris en charge dans certains navigateurs plus anciens .

CSS:

div {
    width: 100%;
    height: 100vh;
}

HTML:

<div>This div is fullscreen :)</div>
olieidel
la source
1
C'est pratique, mais présente des problèmes dans les navigateurs mobiles: css-tricks.com/the-trick-to-viewport-units-on-mobile
Alexander Kim
Pourquoi compliquer les choses? Cela fonctionne sur les navigateurs mobiles DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 et Chrome 81.0.4044.138, ainsi que sur le bureau; Brave 1.10.97, Chrome 83.0.4103.116 et Safari 12.1.2.
Jakob le
1

C'est l'astuce que j'utilise. Bon pour les conceptions réactives. Fonctionne parfaitement lorsque l'utilisateur essaie 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>
Shardul
la source
-8

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

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>
Josh Stodola
la source
1
Si vous utilisez une bibliothèque comme jQuery (recommandé), obtenir la hauteur via $(window).height();serait la meilleure idée.
Josh Stodola
Existe-t-il une solution css pure?
Masque
@Mask Non, il n'y en a pas. Pas encore en tout cas.
Josh Stodola
@Jed Que diriez-vous d'essayer d'appliquer une hauteur minimale: 100% et de l'essayer dans Mac-Safari et peut-être que nous pouvons trouver une solution ici. Je pense que ce serait mieux que de discuter des plates-formes.
Josh Stodola
3
Cela fonctionne dans IE7, Chrome3 et Safari4 et Opera10. Tous testés sur Windows. L'inconvénient est qu'il utilise du javascript, ce que Mask voulait éviter (voir son commentaire sur cette réponse). La réponse de TandemAdam est purement CSS et fonctionne sur tous les navigateurs que j'ai testés à l'exception d'Opera.
awe