¿Cómo hago un div a pantalla completa?

Revisamos profundamente cada escritos en nuestra página web con el objetivo de enseñarte en todo momento información certera y actual.

Solución:

Puede usar la API de pantalla completa HTML5 para esto (que es la forma más adecuada, creo).

La pantalla completa debe activarse a través de un evento de usuario (clic, pulsación de tecla), de lo contrario, no funcionará.

Aquí hay un botón que hace que el div esté en pantalla completa al hacer clic. Y en el modo de pantalla completa, al hacer clic en el botón se saldrá del modo de pantalla completa.

$('#toggle_fullscreen').on('click', function()
    document.webkitFullscreenElement );

#container
  border:1px solid red;
  border-radius: .5em;
  padding:10px;

  

    Toggle Fullscreen
  
  I will be fullscreen, yay!

Tenga en cuenta también que la API de pantalla completa para Chrome no funciona en páginas no seguras. Consulte https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins para obtener más detalles.

Otra cosa a tener en cuenta es el selector CSS de pantalla completa. Puede agregar esto a cualquier selector css para que las reglas se apliquen cuando ese elemento esté en pantalla completa:

#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen 
    width: 100vw;
    height: 100vh;
    

Cuando dices “pantalla completa”, ¿te refieres a pantalla completa para la computadora o para ocupar todo el espacio en el navegador?

No puede forzar al usuario a pantalla completa F11; sin embargo, puede hacer que su div esté a pantalla completa usando el siguiente CSS

div width: 100%; height: 100%;

Por supuesto, esto supondrá que su div es hijo del etiqueta. De lo contrario, deberá agregar lo siguiente además del código anterior.

div position: absolute; top: 0; left: 0;

forma CSS:

#foo 
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

manera JS:

$(function() 
    function abso() 
        $('#foo').css(
            position: 'absolute',
            width: $(window).width(),
            height: $(window).height()
        );
    

    $(window).resize(function() 
        abso();         
    );

    abso();
);

Puntuaciones y reseñas

---

---

Utiliza Nuestro Buscador