Come rendere un <div> sempre a schermo intero?

170

Non importa come sia il suo contenuto.

È possibile farlo?

html css responsive

— Maschera
fonte

2

Ci sono molte grandi risposte qui, ma non vedo alcuna menzione di flexbox, quindi ho pensato di condividere questi 2 centesimi: avere quel div genitore al 100% è una cosa, ma se arriva il momento, organizza e centrare alcuni contenuti in quel div, ti consigliamo di guardare flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

Questo funziona sempre per me:

<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>

Questa è probabilmente la soluzione più semplice a questo problema. Devi solo impostare quattro attributi CSS (anche se uno di questi è solo per rendere felice IE).

— Adam Harte
fonte

1

@AdamHarte Perché non funziona se si rimuove il selettore 'html' dal CSS? → body {altezza: 100%; margine: 0; }

— Alex Prut,

2

@ P.Alex Math! Se l'altezza dei tag HTML si estende per adattarsi al suo contenuto, l'altezza del corpo è pari al 100% di quella principale, quindi non la forzerai al 100% dello spazio disponibile.

— Adam Harte,

1

L'ho appena provato in wpf usando cefsharp chromium e funziona :)

— adminSoftDK

107

Questa è la mia soluzione per creare un div a schermo intero, usando pure css. Visualizza un div a schermo intero che è persistente sullo scorrimento. E se il contenuto della pagina si adatta allo schermo, la pagina non mostrerà una barra di scorrimento.

Testato su 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>

Espandi frammento

— Mihai Cicu
fonte

58

Questo è il modo più stabile (e facile) per farlo, e funziona in tutti i browser moderni:

.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>

Espandi frammento

_{Testato per funzionare con Firefox, Chrome, Opera, Vivaldi, IE7 + (basato sull'emulazione in IE11).}

— soggezione
fonte

1

Funziona meglio se si utilizza il seguente: position: fixed; top: 0; left: 0;e ora la parte che è diverso: width: 100%; height: 100%;. Questo funziona anche con i browser più vecchi in modo impeccabile.

— Aart den Braber

1

Perché è meglio usare larghezza e altezza piuttosto che usare fondo e destra? Se usi larghezza e altezza e vuoi anche un po 'di imbottitura e / o bordo, devi anche assicurarti di averlo box-sizing: border-box;, altrimenti otterrai una scatola più grande che causerà lo scorrimento. Vedere questo .

— timore del

31

Il modo migliore per farlo con i browser moderni sarebbe quello di utilizzare le lunghezze percentuali di Viewport , tornando alle lunghezze percentuali regolari per i browser che non supportano tali unità .

Le lunghezze percentuali delle finestre si basano sulla lunghezza della finestra stessa. Le due unità che utilizzeremo qui sono vh(altezza della finestra) e vw(larghezza della finestra).100vhè uguale al 100% dell'altezza della finestra ed 100vwè uguale al 100% della larghezza della finestra.

Supponendo il seguente HTML:

<body>
    <div></div>
</body>

È possibile utilizzare quanto segue:

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;
}

Ecco una demo di JSFiddle che mostra l' divelemento che riempie sia l'altezza che la larghezza del frame del risultato. Se ridimensionate il frame del risultato, l' divelemento viene ridimensionato di conseguenza.

— James Donnelly
fonte

18

Non ho IE Josh, potresti per favore provare questo per me. Grazie.

<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
fonte

non è necessario impostare le larghezze al 100%

— Adam Harte,

Non capisco; stai codificando con hard disk un'altezza di 800 px sul DIV. L'OP vuole che questo sia dinamico.

— Josh Stodola,

Oh scusa, non ho visto quell'assoluto intrufolato lì dentro (o in alto / a sinistra). Bene, allora :)

— Adam Harte,

Come nota a margine , potresti voler utilizzare position: fixedinvece se la pagina può scorrere, ma tieni

— luiges90

1

Ho sentito che ci sono modi più moderni di risolverlo. @Tubbe sai se è vero?

— bzlm,

8

Quello che ho trovato il miglior modo elegante è come il seguente, la più trucco è fare le divs' 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>

Espandi frammento

— Jeff Tian
fonte

8

Cambia l' bodyelemento in a flex containere divin in a flex item:

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

div {
  flex: 1;
  background: tan;
}

<div></div>

Espandi frammento

— Mori
fonte

8

Ecco la soluzione più breve, basata su vh. Si noti che vhnon è supportato in alcuni browser meno recenti .

CSS:

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

HTML:

<div>This div is fullscreen :)</div>

— olieidel
fonte

1

È conveniente, ma presenta problemi nei browser mobili: css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim,

Perché complicare le cose? Questo fa il lavoro sui browser mobili DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 e Chrome 81.0.4044.138, nonché su desktop; Brave 1.10.97, Chrome 83.0.4103.116 e Safari 12.1.2.

— Jakob,

1

Questo è il trucco che uso. Buono per progetti reattivi. Funziona perfettamente quando l'utente tenta di pasticciare con il ridimensionamento del browser.

<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
fonte

-8

Sfortunatamente, la heightproprietà nei CSS non è affidabile come dovrebbe essere. Pertanto, Javascript dovrà essere utilizzato per impostare lo stile dell'altezza dell'elemento in questione all'altezza della vista degli utenti. E sì, questo può essere fatto senza posizionamento assoluto ...

<!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
fonte

1

Se stai usando una libreria come jQuery (consigliata), ottenere l'altezza tramite $(window).height();sarebbe la migliore idea.

— Josh Stodola,

Esiste una soluzione css pura?

— Maschera

@Mask No, non c'è. Non ancora.

— Josh Stodola,

@Jed Che ne dici di provare ad applicare un'altezza minima: 100% e provarlo in Mac-Safari e forse possiamo raggiungere una soluzione qui. Penso che sarebbe meglio che discutere sulle piattaforme.

— Josh Stodola,

3

Funziona con IE7, Chrome3 e Safari4 e Opera10. Tutto testato su Windows. Lo svantaggio è che utilizza javascript, che era qualcosa che Mask voleva evitare (vedi il suo commento su questa risposta). La risposta di TandemAdam è puro CSS e funziona su tutti i browser che ho testato tranne Opera.

— timore re del