Comment faire un div plein écran?

vous pouvez utiliser L'API Fullscreen HTML5 pour cela (ce qui est la manière la plus appropriée que je pense).

le plein écran doit être déclenché via un événement utilisateur (clic, touche) sinon ça ne marchera pas.

voici un bouton qui fait le plein écran de div sur le clic. Et en mode plein écran, le clic de 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>

veuillez également noter 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: fullscreen CSS selector. Vous pouvez ajouter ceci à n'importe quel sélecteur css pour que les règles soient appliquées quand cet élément est fullscreen:

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

CSS way:

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

JS way:

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

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

    abso();
});

pour le plein écran de la zone de rendu de navigateur il y a une solution simple soutenue par tous les navigateurs modernes.

div#placeholder {
    height: 100vh;
}

la seule exception notable est L'Android ci - dessous 4.3-mais ofc seulement dans l'élément de navigateur de système/webview (Chrome fonctionne bien).

tableau de soutien du navigateur:http://caniuse.com/viewport-units

Pour un affichage plein écran de moniteur, veuillez utiliser HTML5 plein écran API

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

vous pouvez essayer cela..

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

j'espère tu veux...

ou

en cliquant, Vous pouvez utiliser ce par jquery

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

utilisez la hauteur du document si vous voulez l'afficher au-delà de la zone visible du navigateur(zone scrollable).

CSS Portion

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

JQuery Portion

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

C'est le plus simple.

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

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