如何使div全屏？

Question

I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button.我正在使用Flot来绘制我的一些数据的图形，我认为在单击按钮时使该图形全屏显示（占据显示器上的全部空间）会很棒。 Currently, my div is as follows:目前，我的div如下：

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

Of course, the style attribute is only for testing.当然，style 属性仅用于测试。 I will move this to CSS after during the actual design.在实际设计期间，我会将其移至CSS 。 Is there anyway I could make this div fullscreen and still preserve all event handling?无论如何我可以让这个 div 全屏显示并仍然保留所有事件处理吗？

Answer 1

You can use HTML5 Fullscreen API for this (which is the most suitable way i think).您可以为此使用 HTML5 Fullscreen API（这是我认为最合适的方式）。

The fullscreen has to be triggered via a user event (click, keypress) otherwise it won't work.全屏必须通过用户事件（点击、按键）触发，否则将无法工作。

Here is a button which makes the div fullscreen on click.这是一个按钮，可在单击时使 div 全屏显示。 And in fullscreen mode, the button click will exit fullscreen mode.在全屏模式下，单击按钮将退出全屏模式。

 $('#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>

Please also note that Fullscreen API for Chrome does not work in non-secure pages.另请注意，Chrome 的 Fullscreen API 不适用于非安全页面。 See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.有关更多详细信息，请参阅https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins 。

Another thing to note is the :fullscreen CSS selector.另一件需要注意的事情是 :fullscreen CSS 选择器。 You can append this to any css selector so the that the rules will be applied when that element is fullscreen:您可以将其附加到任何 css 选择器，以便在该元素全屏时应用规则：

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

Answer 2

When you say "full-screen", do you mean like full-screen for the computer, or for taking up the entire space in the browser?当你说“全屏”时，你的意思是像计算机全屏，还是占据浏览器的整个空间？

You can't force the user into full-screen F11 ;你不能强制用户进入全屏F11 ； however, you can make your div full screen by using the following CSS但是，您可以使用以下 CSS 使您的 div 全屏显示

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

This will of course assume your div is child of the <body> tag.这当然会假设您的 div 是<body>标签的子级。 Otherwise, you'd need to add the following in addition to the above code.否则，除了上述代码之外，您还需要添加以下内容。

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

Answer 3

CSS way: CSS方式：

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

JS way: JS方式：

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

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

    abso();
});

Answer 4

For fullscreen of browser rendering area there is a simple solution supported by all modern browsers.对于浏览器渲染区域的全屏，所有现代浏览器都支持一个简单的解决方案。

div#placeholder {
    height: 100vh;
}

The only notable exception is the Android below 4.3 - but ofc only in the system browser/webview element (Chrome works ok).唯一值得注意的例外是低于 4.3 的 Android - 但仅在系统浏览器/webview 元素中（Chrome 工作正常）。

Browser support chart: http://caniuse.com/viewport-units浏览器支持图表： http : //caniuse.com/viewport-units

For fullscreen of monitor please use HTML5 Fullscreen API对于全屏显示器，请使用 HTML5 Fullscreen API

Answer 5

.widget-HomePageSlider .slider-loader-hide {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: white;
}

Answer 6

Can use FullScreen API like this可以像这样使用 FullScreen API

function toggleFullscreen() {
  let elem = document.querySelector('#demo-video');

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

Demo演示

 const elem = document.querySelector('#park-pic'); elem.addEventListener("click", function(e) { toggleFullScreen(); }, false); function toggleFullScreen() { if (!document.fullscreenElement) { elem.requestFullscreen().catch(err => { alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitFullscreen(); } }

 #container{ border:1px solid #aaa; padding:10px; } #park-pic { width: 100%; max-height: 70vh; }

 <div id="container"> <p> <a href="#" id="toggle-fullscreen">Toggle Fullscreen</a> </p> <img id="park-pic" src="https://storage.coverr.co/posters/Skate-park"></video> </div>

PS: Using screenfull.js nowadays. PS：现在使用screenfull.js 。 A simple wrapper for cross-browser usage of the JavaScript Fullscreen API. JavaScript Fullscreen API 的跨浏览器使用的简单包装器。

Answer 7

u can try this..你可以试试这个..

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

width and height depends on your flot or graph..宽度和高度取决于您的浮图或图形..

hope u want this...希望你想要这个...

or要么

By clicking, u can use this by jquery通过单击，您可以通过 jquery 使用它

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

Answer 8

Use document height if you want to show it beyond the visible area of browser(scrollable area).如果您想将其显示在浏览器可见区域（可滚动区域）之外，请使用文档高度。

CSS Portion CSS 部分

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

JQuery Portion jQuery 部分

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

Answer 9

This is the simplest one.这是最简单的一种。

#divid {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

Answer 10

<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>

如何使div全屏？

问题描述

10 个解决方案

解决方案1
116 2015-08-19 15:51:48

解决方案2
80 已采纳

解决方案3
28 2011-08-20 07:36:16

解决方案4
23 2014-05-22 11:11:50

解决方案5
13 2014-07-08 10:58:25

解决方案6
5 2019-10-10 02:39:31

解决方案7
3 2011-08-20 08:10:22

解决方案8
2 2013-05-29 11:36:09

解决方案9
2 2014-12-04 05:50:14

解决方案10
0 2016-08-11 13:08:31

如何使div全屏？

问题描述

10 个解决方案

解决方案1 116 2015-08-19 15:51:48

解决方案2 80 已采纳

解决方案3 28 2011-08-20 07:36:16

解决方案4 23 2014-05-22 11:11:50

解决方案5 13 2014-07-08 10:58:25

解决方案6 5 2019-10-10 02:39:31

解决方案7 3 2011-08-20 08:10:22

解决方案8 2 2013-05-29 11:36:09

解决方案9 2 2014-12-04 05:50:14

解决方案10 0 2016-08-11 13:08:31

解决方案1
116 2015-08-19 15:51:48

解决方案2
80 已采纳

解决方案3
28 2011-08-20 07:36:16

解决方案4
23 2014-05-22 11:11:50

解决方案5
13 2014-07-08 10:58:25

解决方案6
5 2019-10-10 02:39:31

解决方案7
3 2011-08-20 08:10:22

解决方案8
2 2013-05-29 11:36:09

解决方案9
2 2014-12-04 05:50:14

解决方案10
0 2016-08-11 13:08:31