Making the `<body>` element strech across the whole screen

html

responsive-design

css

layout

byNikita Barsukov·Aug 22, 2024

To cover the screen entirely with an HTML <body>, the CSS properties margin: 0 should be used to get rid of the default margin and height: 100vh to cover the whole viewport's height:

body {
  margin: 0;
  /* Hey Screen, prepare to be taken over! */
  height: 100vh;
}

Applying the stretch to both "html" and "body"

To ensure that your HTML document body covers the entire browser window, it's crucial to apply this set of rules to both the html and body elements:

html, body {
  /* Space invaders - we are taking over! */
  height: 100%;
  margin: 0;
}

However, when the content on your page isn't tall enough to fill whole screen, using height might just fall..vell short. In such cases, consider using min-height: 100% or min-height: 100vh for the <body>:

body {
  min-height: 100vh; /* Or 100%... this is your choice, not mine */
  margin: 0;
}

Say goodbye to unwanted margins

Browsers like to be generous, they assign some default margin to <html> and <body>. How generous, right? But well, in our quest here, that's unwanted generosity! So we get rid of it:

html, body {
  /* Space, the final frontier, here we come! */
  margin: 0;
  padding: 0;
}

AJAX ain't a detergent, but still helps in clean layout

Ajax isn't just a football club or a kitchen cleaner, it's a crucial part of modern web development. If you're loading content dynamically using AJAX, you would wanna maintain your fullscreen layout, right? Consider this:

function adjustBodyHeight() {
  /* We asked for space, now we dominate! */
  document.body.style.minHeight = window.innerHeight + 'px';
}

// Call this function after AJAX content load
adjustBodyHeight();

Colouring the background without paint

Providing a fullscreen background gradient for your layout gives it a nice visual appeal. You can do that using CSS:

body {
  /* Picasso, who? */
  background-image: linear-gradient(to right, #74ebd5, #acb6e5);
}

And again, don't forget your html.

html {
  height: 100%;
}

Preparing for different scenarios

Your layout must consider a variety of user scenarios:

Fixed Header: Account its size by adjusting the <body>'s padding-top.
Mobile Accessories: Ensure responsiveness on mobile devices as viewport behavior can differ.
Cross-browser Compatibility: Styles should be compatible with different browsers and versions, especially when using vh/vw.

Possible problems and troubleshooting

But beware, overcomplicating the CSS can introduce other issues:

Sliding Issues: Horizontal scroll might appear due to improper width setting, make sure you have it in check:

body {
  /* Stay where you are, width! Don't you dare move! */
  width: 100vw;
  overflow-x: hidden;
}

Overflow: Large content may cause overflow issues.
Resizing Events: Handle browser window resizing events to maintain consistent full-screen coverage.
Viewport Ch-ch-changes: URL bar appear/disappear events in mobile browsers might alter 100vh.