web-dev-qa-db-ja.com

divフルスクリーンを作成するにはどうすればよいですか？

Flot を使用してデータの一部をグラフ化します。ボタンをクリックすると、このグラフがフルスクリーン（モニターの全領域を占める）になるようにするのは素晴らしいことだと考えていました。現在、私のdivは次のとおりです。

<div id="placeholder" style="width:800px;height:600px"></div>

もちろん、style属性はテスト専用です。実際の設計中に、これをCSSに移動します。とにかく、このdivをフルスクリーンにして、すべてのイベント処理を保持できるのでしょうか？

javascriptjqueryhtmlcss3flot
49
Legend

「フルスクリーン」と言うとき、それはコンピューターのフルスクリーンのようなものですか、それともブラウザーのスペース全体を占有するのですか？

ユーザーに全画面表示を強制することはできませんF11;ただし、次のCSSを使用してdivをフルスクリーンにすることができます

div {width: 100%; height: 100%;}

もちろん、これはdivが<body>タグの子であると仮定します。それ以外の場合は、上記のコードに加えて次を追加する必要があります。

div {position: absolute; top: 0; left: 0;}
71
user888750

これにはHTML5 Fullscreen APIを使用できます（これが最適な方法だと思います）。

フルスクリーンは、ユーザーイベント（クリック、キー押下）を介してトリガーする必要があります。そうしないと機能しません。

クリックするとdivをフルスクリーンにするボタンがあります。また、フルスクリーンモードでは、ボタンをクリックするとフルスクリーンモードが終了します。

$('#toggle_fullscreen').on('click', function(){
  // if already full screen; exit
  // else go fullscreen
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    element = $('#container').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
});
#container{
  border:1px solid red;
  border-radius: .5em;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p>
    <a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
  </p>
  I will be fullscreen, yay!
</div>

ChromeのFullscreen APIは、保護されていないページでは機能しないことにも注意してください。詳細については https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins をご覧ください。

注意すべきもう1つの点は、：fullscreen CSSセレクターです。これを任意のcssセレクターに追加して、その要素がフルスクリーンのときにルールが適用されるようにすることができます。

#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }
75
1.44mb

CSSの方法：

#foo {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

JSの方法：

$(function() {
    function abso() {
        $('#foo').css({
            position: 'absolute',
            width: $(window).width(),
            height: $(window).height()
        });
    }

    $(window).resize(function() {
        abso();         
    });

    abso();
});
22
daryl

ブラウザのレンダリング領域のフルスクリーンには、すべての最新のブラウザでサポートされているシンプルなソリューションがあります。

div#placeholder {
    height: 100vh;
}

唯一の注目すべき例外は、4.3以下のAndroidです-ただし、ofcはシステムのbrowser/webview要素のみです（Chromeは正常に動作します）。

ブラウザサポートチャート： http://caniuse.com/viewport-units

モニターのフルスクリーンには、HTML5 Fullscreen APIを使用してください

18
Tomek Kobyliński
.widget-HomePageSlider .slider-loader-hide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: white;
}
10
Denis

これを試すことができます。

<div id="placeholder" style="width:auto;height:auto"></div>

幅と高さは、プロットまたはグラフに依存します。

これが欲しいと願っています...

または

クリックすると、jqueryでこれを使用できます

$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
3
Wahid4sap

ブラウザの表示領域（スクロール可能領域）を超えて表示する場合は、ドキュメントの高さを使用します。

CSS部分

#foo {
    position:absolute;
    top:0;
    left:0;
}

JQuery部分

$(document).ready(function() {
   $('#foo').css({
       width: $(document).width(),
       height: $(document).height()
   });
});
2
Dasun

これは最も単純なものです。

#divid {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
1
Varadha31590
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
0
Aaron