web-dev-qa-db-ja.com

divを全画面に展開します

bootstrap 3とjQueryを使用しています。現在500 x 400のページにdivがあり、bootstrap=行とcol div。たとえば：

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

JQueryを使用して、このdivを全画面表示にするように指示します。ボタンをクリックして全画面表示すると、bootstrap行内でロックされ、親div内で100％x 100％に移動しているようです。 #myDivを使用して、親から削除して全画面表示にします。

私のCSS：

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

このデモフィドル を参照してください

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、-テッド

32
Ted

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に少しエラーがあります。変更 .から#。

3
Dhruv Ramani