¿Cómo hago una pantalla div completa?

Estoy usando Flot para graficar algunos de mis datos y estaba pensando que sería genial hacer que este gráfico aparezca a pantalla completa (ocupe todo el espacio en el monitor) al hacer clic en un botón. Actualmente, mi div es el siguiente:

 

Por supuesto, el atributo de estilo es solo para pruebas. Moveré esto a CSS después durante el diseño real. ¿Hay alguna forma de que pueda hacer esta pantalla completa de Div y aún así conservar todo el manejo de eventos?

Cuando dice “pantalla completa”, ¿quiere decir pantalla completa para la computadora o ocupa todo el espacio en el navegador?

No puede forzar al usuario a la pantalla completa F11 ; sin embargo, puedes hacer que tu div sea pantalla completa usando el siguiente CSS

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

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

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

Puedes utilizar HTML5 Fullscreen API para esto (que es la forma más adecuada, creo).

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

Aquí hay un botón que hace que la pantalla completa de div haga clic. Y en el modo de pantalla completa, el clic del botón saldrá del modo de pantalla completa.

 $('#toggle_fullscreen').on('click', function(){ // if already full screen; exit // else go fullscreen if ( document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement ) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { element = $('#container').get(0); if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } }); 
 #container{ border:1px solid red; border-radius: .5em; padding:10px; } 
  

Toggle Fullscreen

I will be fullscreen, yay!

Forma de CSS:

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

JS manera:

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

Para la pantalla completa del área de representación del navegador hay una solución simple compatible con todos los navegadores modernos.

 div#placeholder { height: 100vh; } 

La única excepción notable es Android debajo de 4.3, pero solo está disponible en el navegador del sistema / elemento webview (Chrome funciona bien).

Gráfico de soporte del navegador: http://caniuse.com/viewport-units

Para pantalla completa del monitor, utiliza HTML5 Fullscreen API

 .widget-HomePageSlider .slider-loader-hide { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; background: white; } 

Puedes probar esto …

 

ancho y alto depende de su flot o gráfico …

espero que quieras esto …

o

Al hacer clic, puede usar esto por jquery

 $("#placeholder").css("width", $(window).width()); $("#placeholder").css("height", $(window).height()); 

Utilice la altura del documento si desea mostrarlo más allá del área visible del navegador (área desplazable).

Porción de CSS

 #foo { position:absolute; top:0; left:0; } 

JQuery Porción

 $(document).ready(function() { $('#foo').css({ width: $(document).width(), height: $(document).height() }); }); 

Este es el más simple.

 #divid { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }