将 div 扩展到全屏

Question

I am using bootstrap 3 and jQuery. I have a div on my page right now that is 500 x 400 and it is sitting inside of a bootstrap row and col div. for example:

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

I want to use jQuery to tell this div to go full screen. When I click on my button to make it go full screen it seems to be locked inside of the bootstrap row and goes to 100% x 100% inside of the parent div. Is there anyway to tell #myDiv to eject from the parent that it is in and go full screen.

My css:

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

Answer 1

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

The trick is in setting position:fixed , by toggling the .fullscreen class. This takes it outside of the normal dom tree, so to speak, and sizes/positions it relative to the window.

HTH, -Ted

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

There is a little error in your css. Change the . to # .