CODEWITHSUNDEEP
htmlcss
john c. j.
john c. j.

Reputation: 1175

The purpose of 100 percent width for body

What is the possible purpose of width: 100% for body and html elements?

Sometimes I could see something like this reset-like snippet on live websites, as well at StackOverflow answers:

html, body
{
  width:  100%; /* ? */
  height: 100%;
  margin: 0;
}

The question may sound silly, but it really bother me. I don't like the situation in which I have some "black magic" in the root elements of HTML-document. This makes me feel that I don't understand the fundamental outlines of what I'm doing.

Upvotes: 4

Views: 827

Answers (1)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

This styles are added just to ensure html and body occupy 100% width of your screen. Just for the case if something is overriding defaults (e.g. in another CSS file). But I've never seen a browser which has another defaults then this.

If you set another value it will occupy more or less then 100%.

html, body {
  width: 125%;
}
In this case body will occupy 125% * 125% = 156.25% of screen width because of 125% body width relative to 125% html

Upvotes: 1

Related Questions