我正在使用 Flot 来绘制一些数据的图表，我想在单击按钮时使该图表显示全屏（占据显示器上的整个空间）会很棒。目前，我的
div<div id="placeholder" style="width:800px;height:600px"></div>
当然，style属性仅用于测试。在实际设计期间我会将其移至
CSS您可以使用 HTML5 Fullscreen API（这是我认为最合适的方式）。
全屏必须通过用户事件（点击、按键）触发，否则将无法工作。
这里有一个按钮，单击后会使 div 全屏显示。并且在全屏模式下，单击按钮将退出全屏模式。
$('#toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
$('#container').get(0).requestFullscreen();
}
});#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 的全屏 API 不适用于非安全页面。有关更多详细信息，请参阅 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins。
另一个需要注意的是 :fullscreen CSS 选择器。您可以将其附加到任何 css 选择器，以便当该元素全屏时应用规则：
#container:fullscreen {
width: 100vw;
height: 100vh;
}
当您说“全屏”时，您的意思是计算机全屏还是占据浏览器中的整个空间？
你不能强迫用户进入全屏
F11div {width: 100%; height: 100%;}
这当然会假设您的 div 是
<body>div {position: absolute; top: 0; left: 0;}
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();
});
对于全屏浏览器渲染区域，有一个所有现代浏览器都支持的简单解决方案。
div#placeholder {
height: 100vh;
}
唯一值得注意的例外是 Android 4.3 以下 - 但 ofc 仅在系统浏览器/webview 元素中（Chrome 工作正常）。
浏览器支持图表：http://caniuse.com/viewport-units
对于显示器的全屏，请使用 HTML5 Fullscreen API
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
可以像这样使用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();
}
}
演示
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>P.S：现在使用screenfull.js。一个简单的包装器，用于 JavaScript 全屏 API 的跨浏览器使用。
这是最简单的。
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
你可以试试这个..
<div id="placeholder" style="width:auto;height:auto"></div>
宽度和高度取决于您的图或图表..
希望你想要这个...
或
通过点击，你可以通过jquery使用它
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
如果您想将其显示在浏览器可见区域（可滚动区域）之外，请使用文档高度。
CSS部分
#foo {
position:absolute;
top:0;
left:0;
}
JQuery 部分
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
使用 Bootstrap 5.0，现在这变得非常简单。只需在全屏元素上打开和关闭这些类即可。
w-100 h-100 position-absolute top-0 start-0 bg-white