How to make a
always full screen?

Question

No matter how its content is like.

Is it possible to do this?

There are lots of great answers here, but I don't see any mention of flexbox, so I thought I'd share this 2 cents: Having that parent div be 100% is one thing, but if the time comes to put, arrange, and center some content in that div, you'll want to look at flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — ArleyM, Nov 22 '15 at 00:46

Adam Harte · Answer 1 · 2019-07-19T04:24:31.757

173

This always works for me:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

This is probably the simplest solution to this problem. Only need to set four CSS attributes (although one of them is only to make IE happy).

edited Jul 19 '19 at 04:24

answered Nov 12 '09 at 02:31

Adam Harte

10,369
7
52
85

1

@AdamHarte Why it doesn't work if you remove the 'html' selector from the CSS? → body { height: 100%; margin: 0; } – Alex P. Apr 12 '14 at 10:14
3

@P.Alex Math! If your HTML tags height stretches to fit its content, then the body height is 100% of its parent, then you will not be forcing it to 100% of the available space. – Adam Harte Apr 15 '14 at 21:46

Mihai Cicu · Answer 2 · 2017-09-01T09:29:11.703

This is my solution to create a fullscreen div, using pure css. It displays a full screen div that is persistent on scrolling. And if the page content fits on the screen, the page won't show a scroll-bar.

Tested in IE9+, Firefox 13+, Chrome 21+

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

awe · Answer 3 · 2015-11-06T13:19:41.893

88

This is the most stable (and easy) way to do it, and it works in all modern browsers:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}

<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

_{Tested to work in Firefox, Chrome, Opera, Vivaldi, IE7+ (based on emulation in IE11).}

edited Nov 06 '15 at 13:19

answered May 30 '14 at 09:43

awe

21,938
6
78
91

2

It works better if you use the following: `position: fixed; top: 0; left: 0;` and now the part that is different: `width: 100%; height: 100%;`. This actually works in older browsers flawlessly as well. – Aart den Braber Mar 17 '17 at 17:22
3

Why is it better to use width and height than using bottom and right? If you use width and height, and also want some padding and/or border, you also need to make sure that you have `box-sizing: border-box;`, otherwise you will get larger box that will cause scrolling. See [this](https://www.w3schools.com/css/css3_box-sizing.asp). – awe Mar 20 '17 at 08:51
This works great. However, as with other solutions too, any scrollbars from the underlying content, still show up. – Marcel Nov 17 '22 at 20:45

score 37 · Answer 4 · answered May 28 '14 at 09:44

The best way to do this with modern browsers would be to make use of Viewport-percentage Lengths, falling back to regular percentage lengths for browsers which do not support those units.

Viewport-percentage lengths are based upon the length of the viewport itself. The two units we will use here are vh (viewport height) and vw (viewport width). 100vh is equal to 100% of the height of the viewport, and 100vw is equal to 100% of the width of the viewport.

Assuming the following HTML:

<body>
    <div></div>
</body>

You can use the following:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

Here is a JSFiddle demo which shows the div element filling both the height and width of the result frame. If you resize the result frame, the div element resizes accordingly.

Tubbe · Answer 5 · 2021-07-07T20:21:46.140

23

This should work, though I don't have IE to test.

<html>
<head>
    <title>Hellomoto</title>
    <style type="text/css">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

edited Jul 07 '21 at 20:21

answered Nov 12 '09 at 08:48

Tubbe

1,068
6
22

1

you don't need to set the widths to 100% – Adam Harte Nov 12 '09 at 09:01
I don't get it; you are hard-coding a height of 800px on the DIV. The OP wants this to be dynamic. – Josh Stodola Nov 12 '09 at 14:12
Oh sorry, didn't see that sneaking absolute in there (or top/left). Well it's fine then :) – Adam Harte Nov 12 '09 at 20:53
As a side note, you may want to use `position: fixed` instead if the page can scroll, but mind you that it does not work in some mobile browsers http://caniuse.com/#feat=css-fixed – luiges90 Feb 08 '13 at 03:51
2

I've heard there are more modern ways of solving this. @Tubbe do you know if that's true? – bzlm Jan 20 '14 at 19:26

score 18 · Answer 6 · edited Aug 28 '23 at 07:34

18

Here's the shortest solution, based on vh. Please note that vh is not supported in some older browsers.

Update: It's been four years since I posted this. In the meantime, most browsers should support this.

CSS:

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

HTML:

<div>This div is fullscreen :)</div>

edited Aug 28 '23 at 07:34

Yves M.

29,855
23
108
144

answered Dec 25 '18 at 14:18

olieidel

1,505
10
10

2

It's convenient, but has issues in mobile browsers: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ – Alexander Kim Nov 26 '19 at 06:55
Why complicate matters? This does the job on mobile browsers DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 and Chrome 81.0.4044.138, as well as on Desktop; Brave 1.10.97, Chrome 83.0.4103.116 and Safari 12.1.2. – Jakob Jul 13 '20 at 09:10

Mori · Answer 7 · 2021-07-07T15:19:02.457

9

Change the body element into a flex container and the div into a flex item:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

edited Jul 07 '21 at 15:19

answered Mar 24 '17 at 08:03

Mori

8,137
19
63
91

score 8 · Answer 8 · answered May 18 '16 at 03:13

What I found the best elegant way is like the following, the most trick here is make the div's position: fixed.

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

score 2 · Answer 9 · answered Nov 22 '15 at 00:42

2

This is the trick I use. Good for responsive designs. Works perfectly when user tries to mess with browser resizing.

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>

answered Nov 22 '15 at 00:42

Shardul

984
1
12
19

Nearly the same as Ned Smith's deleted answer from '09, but uses `min-height` instead of his answer which used `height`. Glad to see this solution returned to the answer list in some form, at least. – TylerH Jul 06 '21 at 14:28

score 1 · Answer 10 · answered Mar 31 '22 at 12:28

Using the Fullscreen API and :fullscreen pseudo-selector, any element can toggle fullscreen mode.

Note:

Stackoverflow does not allow fullscreen mode (document.fullscreenEnabled), so the snippet cannot demonstrate the requestFullscreen() method here.

I recognize the question does not request jQuery. I'm using a library to simplify event binding. Of course vanilla JS can be used instead.

const ns = {
  img_click: (e) => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
      console.log('exited fullscreen');
    } else {
      console.log('entering fullscreen');
      e.currentTarget.requestFullscreen();
    }
  }
};

$('body').on('click', 'img', ns.img_click);

console.log('Fullscreen allowed:', document.fullscreenEnabled);

.gallery {
  display: flex;
  gap: 1em;
}

img {
  width: 100px;
  aspect-ratio: 1/1;
  border-radius: .5em;
  cursor: zoom-in;
  object-fit: cover;
}

img:fullscreen {
  width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">
  <img src="https://picsum.photos/id/123/500/250" alt="Random image" />
  <img src="https://picsum.photos/id/234/250/500" alt="Random image" />
  <img src="https://picsum.photos/id/345/500/500" alt="Random image" />
</div>

References:

QMaster · Answer 11 · 2022-04-23T00:28:12.317

1

I was able to solve my problem with this simple solution. In addition, no matter how long the page scrolls, the div always remains full screen.

#fullScreenDiv {
  position: fixed;
  top: 0;
  bottom: 0;      
  left: 0; /*If width: 100%, you don't need it*/
  right: 0; /*If width: 100%, you don't need it*/
}

Hopefully this helps.

edited Apr 23 '22 at 00:28

answered Apr 23 '22 at 00:18

QMaster

3,743
3
43
56

score 0 · Answer 12 · answered May 24 '22 at 17:32

0

Heey ,this worked for me

#splashScreen{
        background-color:white;
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        overflow:auto;
        max-width: 2000px;

  }

answered May 24 '22 at 17:32

soufiane ELAMMARI

807
8
12

score -9 · Answer 13 · answered Nov 12 '09 at 02:34

-9

Unfortunately, the height property in CSS is not as reliable as it should be. Therefore, Javascript will have to be used to set the height style of the element in question to the height of the users viewport. And yes, this can be done without absolute positioning...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

answered Nov 12 '09 at 02:34

Josh Stodola

81,538
47
180
227

1

If you are using a library like jQuery (recommended), getting the height via `$(window).height();` would be the best idea. – Josh Stodola Nov 12 '09 at 02:47
Is there a pure css solution? – Mask Nov 12 '09 at 02:53
@Mask No, there is not. Not yet anyways. – Josh Stodola Nov 12 '09 at 02:55
@Jed How about you try to apply a min-height:100% and try it in Mac-Safari and maybe we can reach a solution here. I think that would be better than arguing about platforms. – Josh Stodola Nov 12 '09 at 02:58
3

This works in IE7, Chrome3 and Safari4 and Opera10. All tested on Windows. Drawback is it uses javascript, which was something **Mask** wanted to avoid (see his comment on this answer). **TandemAdam**s answer is pure CSS, and works on all the browsers I tested except Opera. – awe Nov 12 '09 at 08:54
@Josh Stodola I've checked your code and it has helped me but I see that if the user would resize this code it would not adapt. Do you have any hint with that? – Daniel Ramirez-Escudero Oct 09 '13 at 10:20

How to make a
always full screen?

13 Answers13

Linked

Related

How to make a always full screen?

13 Answers13

Linked

Related

How to make a
always full screen?