Espandi un div a schermo intero

Question

Sto usando bootstrap 3 e jQuery. Ho un div sulla mia pagina in questo momento che è 500 x 400 ed è seduto all'interno di una riga bootstrap e col div. ad esempio:

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

Voglio usare jQuery per dire a questo div di andare a schermo intero. Quando faccio clic sul mio pulsante per farlo andare a schermo intero sembra essere bloccato all'interno della riga bootstrap e va al 100% x 100% all'interno del div genitore. C'è comunque da dire a #myDiv di espellere dal genitore che è dentro e andare a schermo intero.

mio css:

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

Answer 1

Vedi this demo fiddle

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

Il trucco è nell'impostazione di position:fixed, passando dalla classe .fullscreen. Questo lo porta fuori dal normale albero delle dom, per così dire, e le dimensioni/le posizioni rispetto alla finestra.

HTH, e formattato

Answer 2

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

C'è un piccolo errore nel CSS. Modificare lo . in #.