將 div 擴展到全屏

Question

我正在使用引導程序 3 和 jQuery。 我的頁面上現在有一個 500 x 400 的 div，它位於引導行和 col div 內。 例如：

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

我想使用 jQuery 告訴這個 div 全屏顯示。 當我點擊我的按鈕使其全屏顯示時，它似乎被鎖定在引導行內，並在父 div 內達到 100% x 100%。 無論如何要告訴#myDiv 從它所在的父項中彈出並全屏顯示。

我的CSS：

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

Answer 1

看到這個演示小提琴

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類。 可以這么說，這會將它移到正常的 dom 樹之外，並相對於窗口調整其大小/位置。

HTH, -Ted

Answer 2

查詢

$('#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有一點錯誤。 更改. 到# 。