将 div 扩展到全屏

Question

我正在使用 bootstrap 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

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 中有一点错误。将. 更改为#。

Answer 2

见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 类。可以说，这将其置于普通 dom 树之外，并相对于窗口调整大小/位置。

HTH, -泰德