How to make a <div> always full screen?

user_179364 0
Viewed 541078

No matter how its content is like.

Is it possible to do this?

responsive css html
13 Answers

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

CSS:

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

HTML:

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

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:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
user_25781250

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.

user_18309090

Heey ,this worked for me

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

  }

user_114239100
Related