Развернуть div на весь экран

Question

Я использую bootstrap 3 и jQuery. У меня есть div на моей странице прямо сейчас, что составляет 500 x 400, и он сидит внутри строки начальной загрузки и col div. например:

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

Я хочу использовать jQuery, чтобы сообщить об этом div, чтобы перейти на весь экран. Когда я нажимаю на свою кнопку, чтобы сделать ее полноэкранной, она, похоже, заблокирована внутри строки бутстрапа и переходит на 100% x 100% внутри родительского div. Есть ли вообще сказать #myDiv для извлечения из родителя, в котором он находится, и перейти в полноэкранный режим.

Мой CSS:

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

Answer 1

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

Трюк находится в настройке position:fixed, переключая класс .fullscreen. Это выводит его за пределы обычного дерева деревьев, так сказать, и определяет размер/положение относительно окна.

НТН, -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; 
} 

Существует небольшая ошибка в вашем CSS. Измените . на #.