How do I make a div full screen?

S

11

94

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. Currently, my div is as follows:

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

Of course, the style attribute is only for testing. I will move this to CSS after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?

Selflove answered 20/8, 2011 at 7:19 Comment(0)

P

93

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;}

Peroxy answered 20/8, 2011 at 7:26 Comment(8)

I personally prefer div {position: absolute; top: 0; right: 0; bottom: 0; left: 0;} – Gambol 20/8, 2011 at 7:28

@Codemonkey, that's a nice solution, assuming you don't need to support IE 6. – Lexeme 20/8, 2011 at 8:15

This won't work if the div is contained within another div which has 'relative' positioning set. In this case, you either need to remove relative positioning from parent divs, or use jQuery to .prepend the div to the body element. – Dysphemia 4/7, 2013 at 10:45

That's true for any type of absolute positioning; however, it can be safely assumed that when a veil is being applied, it exists within the top most parent; aka, the body tag. – Peroxy 5/7, 2013 at 11:36

you indeed CAN make the browser go real full-screen (at least if you have a user action to grant you the right) with the HTML5 fullscreen API! Please look at Tracker1's answer a little further down here! :-/ – Mease 12/8, 2016 at 12:56

Basically, it is not fullscreen. It calls full width or height. – Theatricals 23/9, 2019 at 3:36

Try 100vh and vw – Celle 7/11, 2020 at 7:20

And how does youtube do it? You can fullscreen a video and then literally sroll down and see the rest of the page too while staying in fullscreen mode. – Savell 25/4, 2022 at 0:14

B

140

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;
    }

Bassesalpes answered 19/8, 2015 at 15:51 Comment(10)

This is the real answer (I was looking for) – Transmission 22/3, 2016 at 2:24

Me too - this is definitely the correct way to do it! Sometimes I'm baffled by what people accepts as a right answer. :-( fiddling with the width and height might make your div fill out the entire window, but that's no way the same as going full screen! :-( – Mease 12/8, 2016 at 12:53

For some reason this doesn't seem to work when running the snippet here - but moving the code to a JSFiddle works fine: jsfiddle.net/352cg8bv – Scatterbrain 9/8, 2017 at 22:46

This is definitely the better answer. It's finally tied with the accepted answer for upvotes! – Demodulator 2/1, 2019 at 2:39

dude, you are going places... alleluyah ! – Constrained 15/2, 2019 at 20:12

Thanks for the answer, that was the best! – Theatricals 23/9, 2019 at 3:34

Awesome! add (CSS style) background-color: #fff; to make the full screen background appear white (appears black otherwise, in Firefox v88). – Basidiomycete 7/5, 2021 at 21:33

Your a genius in my eyes! We struggled with fullscreen in classroom for full day until finding this:) Thanks! – Tram 13/7, 2021 at 19:34

Awesome. If you need Scrollbars use overflow: auto !important; in the :fullscreen selector – Krasnodar 15/11, 2021 at 18:14

Now it is 2022, you can probably remove the support for the experimental, vendor-prefixed versions of the API from this answer. They bloat the code a lot for no real benefit this decade. – Goncourt 2/8, 2022 at 10:25

P

93

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;}

Peroxy answered 20/8, 2011 at 7:26 Comment(8)

I personally prefer div {position: absolute; top: 0; right: 0; bottom: 0; left: 0;} – Gambol 20/8, 2011 at 7:28

@Codemonkey, that's a nice solution, assuming you don't need to support IE 6. – Lexeme 20/8, 2011 at 8:15

This won't work if the div is contained within another div which has 'relative' positioning set. In this case, you either need to remove relative positioning from parent divs, or use jQuery to .prepend the div to the body element. – Dysphemia 4/7, 2013 at 10:45

That's true for any type of absolute positioning; however, it can be safely assumed that when a veil is being applied, it exists within the top most parent; aka, the body tag. – Peroxy 5/7, 2013 at 11:36

you indeed CAN make the browser go real full-screen (at least if you have a user action to grant you the right) with the HTML5 fullscreen API! Please look at Tracker1's answer a little further down here! :-/ – Mease 12/8, 2016 at 12:56

Basically, it is not fullscreen. It calls full width or height. – Theatricals 23/9, 2019 at 3:36

Try 100vh and vw – Celle 7/11, 2020 at 7:20

And how does youtube do it? You can fullscreen a video and then literally sroll down and see the rest of the page too while staying in fullscreen mode. – Savell 25/4, 2022 at 0:14

H

31

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();
});

Hillie answered 20/8, 2011 at 7:36 Comment(2)

this solution works perfectly. I had to create a wrapper div that I applied this styling to, and it's child elements continue to work as previously desired! Cheers! – Stubbed 20/3, 2014 at 19:43

I just wrote this: {position:absolute; top:0; right:0; bottom:0; left:0;} and now it works great. Thank you! – Dou 28/2, 2016 at 3:1

B

24

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

Bash answered 22/5, 2014 at 11:11 Comment(1)

this is working like a charm in an android WebView, thank you sir! #graph { width: 100vw; height: 100vh; } – Shakhty 1/9, 2014 at 20:37

H

15

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

Huberthuberto answered 8/7, 2014 at 10:58 Comment(2)

Observe that most answers contain some explanation and discussion, not just code. – Cutting 8/7, 2014 at 11:17

This was the only solution that worked for me because my modal dialog's html was within another div that was position: relative. Thanks. – Garotte 8/7, 2015 at 18:19

M

9

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.

Maggy answered 10/10, 2019 at 2:39 Comment(1)

+1 as you are the only person to answer the specific "occupy full space on the monitor" the OP asked for – Dentiform 14/4, 2021 at 22:28

H

4

This is the simplest one.

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

Horology answered 4/12, 2014 at 5:50 Comment(0)

H

3

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());

Hist answered 20/8, 2011 at 8:10 Comment(0)

I

2

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()
   });
});

Ingram answered 29/5, 2013 at 11:36 Comment(0)

G

0

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

Gooseberry answered 11/8, 2016 at 13:8 Comment(1)

This is already in the answer by Daryl and your answer doesn't bring anything new – Analects 11/8, 2016 at 13:33

E

0

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

Expostulate answered 6/10, 2022 at 14:55 Comment(0)

Recommended topics

Hot tags