How To Set Web Page Size

HTML vs Body: How to Set Width and Height for Full Page Size

CSS is difficult but besides forgiving. And this forgiveness allows usa to haphazardly throw styles into our CSS.

Our page still loads. There is no "crash".

When it comes to folio width and height, do you know what to set on the HTML element? How about the body element?

Practice you just slap the styles into both elements and hope for the best?

If you do, you're non alone.

The answers to those questions are not intuitive.

I'yard 100% guilty of applying styles to both elements in the past without considering exactly which holding should be applied to which element. 🤦‍♂️

It is not uncommon to see CSS properties practical to both the HTML and body elements like this:

                html, torso {      min-meridian: 100%; }

Does Information technology Matter?

Yep, yeah information technology does.

The above style definition creates a problem:

Setting min-height to 100% on both elements does not allow the trunk element to make full the page similar you might wait. If you check the computed style values in dev tools, the torso chemical element has a height of zero.

Meanwhile, the HTML element has a height equal to the visible part of the page in the browser.

Look at the following screenshot from Chrome Dev Tools:

empty_body — The body element has a default 8px margin indicated by the bar on top. The peak value is 0.

Why Does This Happen?

Using a pct equally a size value requires the element to reference a parent to base that percentage on.

The HTML element references the viewport which has a height value equal to the visible viewport height. Withal, nosotros only fix a min-summit on the HTML element... NOT a superlative holding value.

Therefore, the body element has no parent height value to reference when deciding what 100% is equal to.

If you started out with enough content to fill the torso of the folio, you might not have noticed this result.

And to make it more than difficult to discover, if y'all set a background-colour on both elements or even on just ane of them, the viewport is full of that color. This gives the impression the trunk chemical element is as tall equally the viewport.

It'southward not. It's nonetheless at nothing.

The paradigm to a higher place is taken from a page with the following CSS:

                html, trunk {     min-meridian: 100%; } body { background-color: dodgerblue; }

Contrary-inheritance?

In a foreign twist, the HTML element assumes the background-color of the torso element if you don't set a dissever background-color on the html element.

And so What is the Ideal Height Setting for a Full Responsive Page?

For years, the answer was the following:

                html {     height: 100%; } trunk {     min-summit: 100%; }

This allows the HTML element to reference the parent viewport and have a elevation value equal to 100% of the viewport value.

With the HTML element receiving a peak value, the min-height value assigned to the body element gives it an initial pinnacle that matches the HTML element.

This also allows the body to to abound taller if the content outgrows the visible folio.

The merely drawback is the HTML element does not grow beyond the height of the visible viewport. However, assuasive the body chemical element to outgrow the HTML chemical element has been considered adequate.

The Modern Solution is Simplified

                body { min-height: 100vh; }

This example uses vh (viewport height) units to allow the torso to set a minimum height value based upon the full height of the viewport.

Like the previously discussed groundwork-color, if nosotros do non set a peak value for the HTML element, it will assume the same value for height that is given to the body element.

Therefore, this solution avoids the HTML element overflow present in the previous solution and both elements grow with your content!

The employ of vh units did crusade some mobile browser issues in the past, but information technology appears that Chrome and Safari are consistent with viewport units at present.

Page Elevation May Cause a Horizontal Scrollbar

Expect, what?

Shouldn't this say "Page Width"?

Nope.

In another foreign series of events, your page height may activate the horizontal scrollbar in your browser.

When your page content grows taller than the viewport summit, the vertical scrollbar on the correct is activated. This can cause your page to instantly have a horizontal scrollbar as well.

So What is the Fix?

Yous may sleep better knowing it starts with a page width setting.

This problem arises when any chemical element - not just the HTML or body element - is set to 100vw (viewport width) units.

The viewport units do not account for the approximate ten pixels that the vertical scrollbar takes up.

Therefore, when the vertical scrollbar activates you lot also get a horizontal scrollbar.

How to Gear up the Page for Full Width

Mayhap just don't.

Not setting a width on the HTML and body elements will default to the full size of the screen. If you exercise gear up a width value other than auto, consider utilizing a CSS reset first.

Remember, by default the torso chemical element has 8px of margin on all sides.

A CSS reset removes this. Otherwise, setting the width to 100% before removing the margins will cause the body chemical element to overflow. Here's the CSS reset I use:

                * {      margin: 0;     padding: 0;     box-sizing: border-box; }

How to Set Width to Your Preference

While it may not always exist necessary to set a width, I usually do.

It may simply exist a addiction.

If yous set the width to 100% on the trunk chemical element you volition have a full page width. This is essentially equivalent to not setting a width value and allowing the default.

If you want to utilise the trunk chemical element as a smaller container and let the HTML element fill the page, you lot could set a max-width value on the body.

Here's an example:

                html { background-color: #000; }  torso {     min-summit: 100vh;     max-width: 400px;     groundwork-colour: papayawhip;      margin: 0 machine; }

Determination

With no elevation value provided for the HTML chemical element, setting the peak and/or min-peak of the body element to 100% results in no height (before you add content).

However, with no width value provided for the HTML chemical element, setting the width of the trunk element to 100% results in full page width.

This can exist counterintuitive and confusing.

For a responsive full page pinnacle, set the body element min-height to 100vh.

If you lot set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.

I'll leave yous with a tutorial from my YouTube aqueduct demonstrating the CSS summit and width settings for an HTML folio that is full screen size and grows with the content information technology contains:

Do you take a different way of setting the CSS width and height that you prefer?

Permit me know your method!

Learn to code for free. freeCodeCamp'south open source curriculum has helped more than 40,000 people get jobs as developers. Get started