How to make a `` always full screen?

html

responsive-design

css

performance

byAlex Kataev·Jan 20, 2025

To make a <div> span the entire screen, use viewport units in your CSS. To achieve this, the width property should be set as 100vw, and the height property as 100vh:

.fullscreen-div {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

Link this CSS class to your <div>:

<div class="fullscreen-div"></div>

Now, your <div> will claim the entire screen estate like aggressive seagulls at a beach picnic.

Setting the stage (Reset default styles)

First things first, we need to neutralize browser's default styles by setting margin and padding to 0 on <html> and <body>.

html, body {
  height: 100%;
  margin: 0; /*Like ranch in a pizza shop, we don't need this here*/
  padding: 0; /*Padding? Not on my watch!*/
}

Managing big content (Handling overflow)

In case the content inside the <div> goes overboard like a pirate walking the plank, use overflow: auto; to manage scrolling.

.fullscreen-div {
  overflow: auto; /*Overflow, say hello to scroll*/
}

Dealing with Past Internet Explorer (Graceful degradation)

For old browsers (cough Internet Explorer cough), a min-height: 100% on the #wrapper div will act as the knights in shining armor if viewport units are not supported.

#wrapper {
  min-height: 100%; /*Whatcha gonna do when IE makes trouble for you? Use this!*/
}

Styling and Opacity (Visual aesthetics)

Background color or slight opacity can exhibit the extent of full-screen <div>. It's like a bling for your div!

.fullscreen-div {
  background-color: rgba(0, 0, 0, 0.5); /*Stylish yet see-through*/
}

Seadog Mode (Persistent fixed positioning)

If you want your <div> to claim the screen estate at all times like a parrot on a pirate's shoulder, use position: fixed; instead of absolute.

.fullscreen-div {
  position: fixed; /*Like a pirate to his treasure, stays fixed*/
}

Being efficient (Performance considerations)

Avoid needless complexity in your CSS or JavaScript. We're coding here, not writing the next Great American Novel!

Responsive to devices (Adaptive styling)

The div needs to respond quicker than a pirate to a gold sighting. Here's how to ensure responsiveness:

Media queries

Integrate media queries to adjust styles to ensure full-screen coverage on all devices. It's like having different plans for different loot.

@media (max-width: 600px) {
  .fullscreen-div {
    /* Adjust styles for mobile devices */
  }
}

Unit compatibility

Create a winning team of vh/vw units and percentage-based fallbacks for cross-compatibility.

.fullscreen-div {
  width: 100%;  /* For poor souls without modern units */
  width: 100vw;  /* For modern browsers */
  height: 100%;  /* Backing up the oldies */
  height: 100vh;  /* Stretching out on new ones */
}

Preventing content shifts

To avoid content shifts (not the seismic kind), consider the use of box-sizing: border-box;.

.fullscreen-div {
  box-sizing: border-box; /*Enough with the shifting already!*/
}

More tips and tricks (Pro level)

Three more nuggets of wisdom to guide you further:

Scrollbars

Eradicate scrollbars by setting overflow: hidden;. But remember, not all content can swim!

body {
  overflow: hidden; /*Lovely page, where have your scrollbars gone?*/
}

Master layers with z-index

When stacking content, consider z-index your new BFF. Higher values rule, but don't allow stacking context issues to rain on your parade.

.fullscreen-div {
  z-index: 1000; /*Take that, lower layers! */
}

Live Demo

Demonstrate your solution with JSFiddle or CodePen. Like a pirate's treasure map, it's proof of your conquest!

Interactivity

Think about user interactions with your layout, especially for fixed positions. Don't be the pirate who steals the fun!

explain-codes / Html / How to make a `` always full screen?

Linked

Full-screen iframe with a height of 100%



Disable the Horizontal Scroll



Html iframe - disable scroll



What's the opposite of a nbsp?



Css div element - how to show horizontal scroll bars only?



Css hide scroll bar if not needed



Make body have 100% of the browser height



Setting the stage (Reset default styles)Managing big content (Handling overflow)Dealing with Past Internet Explorer (Graceful degradation)Styling and Opacity (Visual aesthetics)Seadog Mode (Persistent fixed positioning)Being efficient (Performance considerations)Responsive to devices (Adaptive styling)More tips and tricks (Pro level)