如何制作一个 div 全屏？

小开

最佳答案

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; however, you can make your div full screen by using the following CSS

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

This will of course assume your div is child of the <body> tag. Otherwise, you'd need to add the following in addition to the above code.

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

小开

CSS way:

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

JS way:

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


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


abso();
});

小开

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

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

小开

Use document height if you want to show it beyond the visible area of browser(scrollable area).

CSS Portion

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

JQuery Portion

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

小开

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).

Browser support chart: http://caniuse.com/viewport-units

For fullscreen of monitor please use HTML5 Fullscreen API

小开

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

小开

This is the simplest one.

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

小开

You can use HTML5 Fullscreen API for this (which is the most suitable way i think).

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. 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.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>

Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.

Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:

#container:fullscreen {
width: 100vw;
height: 100vh;
}

小开

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

小开

Can use FullScreen API like this

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>

P.S: Using screenfull.js nowadays. A simple wrapper for cross-browser usage of the JavaScript Fullscreen API.

小开

With Bootstrap 5.0 this is incredibly easy now. Just toggle these classes on and off the full screen element.

w-100 h-100 position-absolute top-0 start-0 bg-white