¿Cómo hacer un <div> siempre a pantalla completa?

170

No importa cómo sea su contenido.

¿Es posible hacer esto?

html css responsive

— Máscara
fuente

2

Hay muchas respuestas geniales aquí, pero no veo ninguna mención de flexbox, así que pensé en compartir estos 2 centavos: Tener esa división de padres al 100% es una cosa, pero si llega el momento de ponerlo, organice y centrar parte del contenido en ese div, querrás mirar flexbox css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

Esto siempre funciona para mí:

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

Esta es probablemente la solución más simple para este problema. Solo necesita establecer cuatro atributos CSS (aunque uno de ellos es solo hacer feliz a IE).

— Adam Harte
fuente

1

@AdamHarte ¿Por qué no funciona si elimina el selector 'html' del CSS? → cuerpo {altura: 100%; margen: 0; }

— Alex Prut

2

@ P.Alex Math! Si la altura de sus etiquetas HTML se estira para ajustarse a su contenido, entonces la altura del cuerpo es el 100% de su padre, entonces no la forzará al 100% del espacio disponible.

— Adam Harte

1

Acabo de probarlo en wpf usando cefsharp chromium y funciona :)

— adminSoftDK

107

Esta es mi solución para crear un div de pantalla completa, usando CSS puro. Muestra un div de pantalla completa que es persistente en el desplazamiento. Y si el contenido de la página cabe en la pantalla, la página no mostrará una barra de desplazamiento.

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

Expandir fragmento

— Mihai Cicu
fuente

58

Esta es la forma más estable (y fácil) de hacerlo, y funciona en todos los navegadores modernos:

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

Expandir fragmento

_{Probado para trabajar en Firefox, Chrome, Opera, Vivaldi, IE7 + (basado en la emulación en IE11).}

— temor
fuente

1

Funciona mejor si se utiliza la siguiente: position: fixed; top: 0; left: 0;Y ahora la parte que es diferente: width: 100%; height: 100%;. Esto también funciona perfectamente en navegadores antiguos.

— Aart den Braber

1

¿Por qué es mejor usar ancho y alto que usar abajo y a la derecha? Si usa ancho y alto, y también quiere algo de relleno y / o borde, también debe asegurarse de que lo tiene box-sizing: border-box;, de lo contrario obtendrá un cuadro más grande que provocará el desplazamiento. Mira esto .

— asombro

31

La mejor manera de hacer esto con los navegadores modernos sería hacer uso de las longitudes porcentuales de la ventana gráfica , volviendo a las longitudes porcentuales regulares para los navegadores que no admiten esas unidades .

Las longitudes de porcentaje de ventana gráfica se basan en la longitud de la ventana gráfica misma. Las dos unidades que usaremos aquí son vh(altura de ventana) y vw(ancho de ventana). 100vhes igual al 100% de la altura de la ventana gráfica y 100vwes igual al 100% del ancho de la ventana gráfica.

Asumiendo el siguiente HTML:

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

Puedes usar lo siguiente:

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

Aquí hay una demostración de JSFiddle que muestra el divelemento que llena tanto el alto como el ancho del marco de resultados. Si divcambia el tamaño del marco de resultados, el elemento cambia de tamaño en consecuencia.

— James Donnelly
fuente

18

No tengo IE Josh, ¿podrías probar esto por mí? Gracias.

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

no es necesario establecer el ancho al 100%

— Adam Harte

No lo entiendo; está codificando una altura de 800 px en el DIV. El OP quiere que esto sea dinámico.

— Josh Stodola

Oh, lo siento, no vi ese furtivo absoluto allí (o arriba / izquierda). Bueno, entonces está bien :)

— Adam Harte

Como nota al margen, puede usar position: fixeden su lugar si la página puede desplazarse, pero tenga en cuenta que no funciona en algunos navegadores móviles caniuse.com/#feat=css-fixed

— luiges90

1

He oído que hay formas más modernas de resolver esto. @Tubbe, ¿sabes si eso es cierto?

— bzlm

8

Lo que encontré de la mejor manera elegante es lo siguiente, el mayor truco aquí es hacer los 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>

Expandir fragmento

— Jeff Tian
fuente

8

Cambie el bodyelemento en ay flex containerel diven a flex item:

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

div {
  flex: 1;
  background: tan;
}

<div></div>

Expandir fragmento

— Mori
fuente

8

Aquí está la solución más corta, basada en vh. Tenga en cuenta que vhno es compatible con algunos navegadores antiguos .

CSS:

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

HTML:

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

— olieidel
fuente

1

Es conveniente, pero tiene problemas en los navegadores móviles: css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim

¿Por qué complicar las cosas? Esto hace el trabajo en los navegadores móviles DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 y Chrome 81.0.4044.138, así como en el escritorio; Brave 1.10.97, Chrome 83.0.4103.116 y Safari 12.1.2.

— Jakob

1

Este es el truco que uso. Bueno para diseños receptivos. Funciona perfectamente cuando el usuario intenta meterse con el cambio de tamaño del navegador.

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

-8

Desafortunadamente, la heightpropiedad en CSS no es tan confiable como debería ser. Por lo tanto, Javascript tendrá que usarse para establecer el estilo de altura del elemento en cuestión a la altura de la ventana gráfica de los usuarios. Y sí, esto se puede hacer sin posicionamiento absoluto ...

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

1

Si está utilizando una biblioteca como jQuery (recomendado), $(window).height();la mejor idea sería obtener la altura .

— Josh Stodola

¿Existe una solución css pura?

— Máscara el

@Máscara No, no la hay. Todavía no de todos modos.

— Josh Stodola

@Jed ¿Qué tal si intentas aplicar una altura mínima: 100% e intentarlo en Mac-Safari y quizás podamos encontrar una solución aquí? Creo que eso sería mejor que discutir sobre plataformas.

— Josh Stodola

3

Esto funciona en IE7, Chrome3 y Safari4 y Opera10. Todo probado en Windows. La desventaja es que usa JavaScript, que era algo que Mask quería evitar (vea su comentario en esta respuesta). La respuesta de TandemAdam es CSS puro, y funciona en todos los navegadores que probé excepto Opera.

— asombro