How to make a <div> always full screen?

Html Problem Overview

No matter how its content is like.

Is it possible to do this?

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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>

Solution 3 - Html

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

Solution 4 - Html

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.

Solution 5 - Html

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>

Solution 6 - Html

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>

Solution 7 - Html

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>

Solution 8 - Html

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>

Solution 9 - Html

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>

Solution 10 - Html

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.

Solution 11 - Html

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:

Solution 12 - Html

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>

Content Type	Original Author	Original Content on Stackoverflow
Question	Mask	View Question on Stackoverflow
Solution 1 - Html	Adam Harte	View Answer on Stackoverflow
Solution 2 - Html	Mihai Cicu	View Answer on Stackoverflow
Solution 3 - Html	awe	View Answer on Stackoverflow
Solution 4 - Html	James Donnelly	View Answer on Stackoverflow
Solution 5 - Html	Tubbe	View Answer on Stackoverflow
Solution 6 - Html	olieidel	View Answer on Stackoverflow
Solution 7 - Html	Mori	View Answer on Stackoverflow
Solution 8 - Html	Jeff Tian	View Answer on Stackoverflow
Solution 9 - Html	Shardul	View Answer on Stackoverflow
Solution 10 - Html	QMaster	View Answer on Stackoverflow
Solution 11 - Html	OXiGEN	View Answer on Stackoverflow
Solution 12 - Html	Josh Stodola	View Answer on Stackoverflow