style body attribute javascript jquery html css3 flot

javascript - body - ¿Cómo hago una pantalla div completa?



title html (9)

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 <body> . De lo contrario, deberá agregar lo siguiente además del código anterior.

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

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:

<div id="placeholder" style="width:800px;height:600px"></div>

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?


Este es el más simple.

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


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 redirección del navegador, existe 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


Puedes probar esto ...

<div id="placeholder" style="width:auto;height:auto"></div>

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());


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <p> <a href="#" id="toggle_fullscreen">Toggle Fullscreen</a> </p> I will be fullscreen, yay! </div>

Tenga en cuenta que la API de pantalla completa para Chrome no funciona en páginas no seguras. Consulte https://goo.gl/rStTGz para obtener más detalles.

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

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


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


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


<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>