web-dev-qa-db-fra.com

Comment créer un div en plein écran?

J'utilise Flot pour représenter graphiquement certaines de mes données et je pensais qu'il serait intéressant de faire apparaître ce graphique en plein écran (occuper tout l'espace sur le moniteur) en cliquant sur un bouton. Actuellement, ma div est la suivante:

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

Bien sûr, l'attribut style est uniquement destiné à des tests. Je vais déplacer ceci à CSS après pendant la conception réelle. Y a-t-il un moyen de rendre cette div en plein écran tout en préservant la gestion des événements?

javascriptjqueryhtmlcss3flot
42
Legend

Quand vous dites "plein écran", voulez-vous dire comme plein écran pour l'ordinateur ou pour occuper tout l'espace disponible dans le navigateur?

Vous ne pouvez pas forcer l'utilisateur à utiliser F11 en plein écran; Cependant, vous pouvez rendre votre div en plein écran en utilisant le code CSS suivant.

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

Cela supposera bien sûr que votre div est enfant de la balise <body>. Sinon, vous devrez ajouter ce qui suit en plus du code ci-dessus.

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

Vous pouvez utiliser l'API HTML5 Fullscreen pour cela (ce qui est, à mon avis, le moyen le plus approprié).

Le plein écran doit être déclenché via un événement utilisateur (clic, pression de touche), sinon cela ne fonctionnera pas.

Voici un bouton qui rend la div en plein écran au clic. Et en mode plein écran, le clic du bouton quittera le mode plein écran.

$('#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>

Notez également que l'API Fullscreen pour Chrome ne fonctionne pas dans les pages non sécurisées. Voir https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins pour plus de détails.

Une autre chose à noter est le sélecteur CSS: plein écran. Vous pouvez l'ajouter à n'importe quel sélecteur css pour que les règles soient appliquées lorsque cet élément est en plein écran:

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

Manière CSS:

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

Façon JS:

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

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

    abso();
});
22
daryl

Pour la zone de rendu du navigateur plein écran, il existe une solution simple supportée par tous les navigateurs modernes.

div#placeholder {
    height: 100vh;
}

La seule exception notable est l’Android inférieur à 4.3 - mais souvent uniquement dans le navigateur système/l’élément WebView (Chrome fonctionne bien).

Tableau de support du navigateur: http://caniuse.com/viewport-units

Pour le plein écran du moniteur, veuillez utiliser l'API HTML5 Fullscreen.

16
Tomek Kobyliński
.widget-HomePageSlider .slider-loader-hide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: white;
}
9
Denis

Utilisez la hauteur du document si vous souhaitez l'afficher au-delà de la zone visible du navigateur (zone déroulante).

Portion CSS

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

Portion JQuery

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

tu peux essayer ça ..

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

la largeur et la hauteur dépendent de votre flot ou de votre graphique.

j'espère que tu veux ça ...

ou 

En cliquant, vous pouvez l’utiliser par jquery

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

C'est le plus simple.

#divid {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
1
Varadha31590
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
0
Aaron