How do I make a div full screen?

javascript jquery html css flot

265,060

Solution 1

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

Solution 2

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.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. 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:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }

Solution 3

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

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

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

For fullscreen of monitor please use HTML5 Fullscreen API

Solution 5

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

View more solutions

265,060

Legend

Just a simple guy :)

Updated on July 08, 2022

Comments

Legend almost 2 years
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?
Hubro almost 13 years

I personally prefer div {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
eyelidlessness almost 13 years

@Codemonkey, that's a nice solution, assuming you don't need to support IE 6.
Dave Hilditch almost 11 years

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.
Admin almost 11 years

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.
Migisha over 10 years

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!
Tom Zych almost 10 years

Observe that most answers contain some explanation and discussion, not just code.
hotzen almost 10 years

this is working like a charm in an android WebView, thank you sir! #graph { width: 100vw; height: 100vh; }
slim almost 9 years

This was the only solution that worked for me because my modal dialog's html was within another div that was position: relative. Thanks.
davidrl1000 over 8 years

I just wrote this: {position:absolute; top:0; right:0; bottom:0; left:0;} and now it works great. Thank you!
JustGage over 8 years

This is the real answer (I was looking for)
goto almost 8 years

This is already in the answer by Daryl and your answer doesn't bring anything new
hasse almost 8 years

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! :-(
hasse almost 8 years

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! :-/
abagshaw almost 7 years

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
dockleryxk over 5 years

This is definitely the better answer. It's finally tied with the accepted answer for upvotes!
M. Gara over 5 years

dude, you are going places... alleluyah !
Bahramdun Adil almost 5 years

Thanks for the answer, that was the best!
Bahramdun Adil almost 5 years

Basically, it is not fullscreen. It calls full width or height.
Rahul over 3 years

Try 100vh and vw
shmup about 3 years

+1 as you are the only person to answer the specific "occupy full space on the monitor" the OP asked for
Victoria Stuart about 3 years

Awesome! add (CSS style) background-color: #fff; to make the full screen background appear white (appears black otherwise, in Firefox v88).
Woody almost 3 years

Your a genius in my eyes! We struggled with fullscreen in classroom for full day until finding this:) Thanks!
Christian Gollhardt over 2 years

Awesome. If you need Scrollbars use overflow: auto !important; in the :fullscreen selector
Nexarius about 2 years

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.