web-dev-qa-db-fra.com

Agrandir un div en plein écran

J'utilise bootstrap 3 et jQuery. J'ai un div sur ma page en ce moment qui est de 500 x 400 et il est assis à l'intérieur d'une ligne bootstrap et col div. par exemple:

 <div class="row">
      <div class="col-lg-12">
           <div id="myDiv"></div>
      </div>
 </div>

Je veux utiliser jQuery pour dire à ce div d'aller en plein écran. Lorsque je clique sur mon bouton pour le faire passer en plein écran, il semble être verrouillé à l'intérieur de la ligne bootstrap et va à 100% x 100% à l'intérieur de la div parent. Y a-t-il de toute façon à dire #myDiv pour éjecter du parent dans lequel il se trouve et passer en plein écran.

Mon css:

 #myDiv{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
 }
javascriptjqueryhtmlcsstwitter-bootstrap
15
LargeTuna

Voir ce violon de démonstration

CSS

#myDiv.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
 }

#myDiv{background:#cc0000; width:500px; height:400px;}

HTML

<div class="row">
  <div class="col-lg-12">
       <div id="myDiv">
           my div
          <button>Full Screen</button>
      </div>
  </div>

JS:

$('button').click(function(e){
    $('#myDiv').toggleClass('fullscreen'); 
});

L'astuce consiste à définir position:fixed, en basculant le .fullscreen classe. Cela le place en dehors de l'arborescence dom normale, pour ainsi dire, et le taille/le positionne par rapport à la fenêtre.

HTH, -Ted

32
Ted

JQuery

$('#button').click(function(){
  $('#myDiv').css({"top":"0","bottom":"0","left":"0","right":"0"});
});

CSS 

 #myDiv{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
 }

Il y a une petite erreur dans votre css. Changer la . à #.

3
Dhruv Ramani