1

Aim is to make the whole background color of a page blue, by using a div. With normal HTML, I see the blue color. With HTML5 (by including the doctype tag), I only see a blue strip in the region of the text inside the #mobile div. Why is this? How to fix HTML5 version?

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body{   
        height: 100%;
        margin: 0 auto; 
        background: yellow;
      }	
    </style>
  </head>
  <body>
    <div id="mobile" style="width: 100%;height: 100%;background-color: blue;">
      Test text
    </div>
  </body>
</html>

1
  • If you are able to use viewport units, like vh, check my answer
    – Asons
    Sep 18, 2016 at 10:33

6 Answers 6

2

The reason for this is that browsers have a "standards mode" and a "quirks mode". The presence of a doctype triggers the standards compliance mode. When browsers detect a web page without a doctype, they revert to "quirks mode", which basically assumes that these pages contain legacy code, and the browser tries to catch and correct errors.

You can make a standards-compliant page (i.e one that contains a HTML doctype) entirely blue by simply by using the following CSS:

html { background-color: blue }
2

I feel that answers on this could be more specific.

Why is this?

I think the explanation by MDN is pretty spot on:

In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.

There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In almost standards mode, there are only a very small number of quirks implemented.

How do browsers determine which mode to use? For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE [...]

Basically what this is saying is that if you use a DOCTYPE (which you probably would want to) all HTML and CSS gets applied to your page as described by W3C standards.

These standards define that your body will have no height by default. Still it is a common misunderstanding that it will get one setting it to percentages, as a percentage on any DOM element will be relative to its parent. The parent of <body> apparently is <html>. Now the parent of <html> would be your viewport (the dimensions of the part of your browser where pages get rendered). You can set html {height: 100%} and now <html> will be the size of your viewport but <body>, as most other DOM elements, will not inherit this value by default:

html{
  height: 100%;
}
body{
  background: yellow;
  margin: 0;
}
div{
  background: papayawhip;
  height: 100%;
}
<div>By default a divs and a bodys height expands with its content or its parents defined size.</div>

You will have to pass down the height from the viewport down to <html> and then down to <body>. From there it can be inherited by other elements:

html{
  height: 100%;
}
body{
  background: yellow;
  margin: 0;
  height: inherit;
}
div{
  background: papayawhip;
  height: inherit;
}
<div>We can override default behaviour by explicitly passing down the viewport height to html, from there to body and from there to any element.</div>

This is why you will often see html, body {height: 100%} in stylesheets. Latest web technology includes viewport units for you to use with still not perfect browser support to get around this hook:

body{
  background: yellow;
  margin: 0;
}
div{
  background: papayawhip;
  height: 100vh;
}
<div>Recent web technology provides easier methods.</div>

I hope this may help you really understand better what's going on in your document. Take note that there's also (like always) workarounds (sometimes called hacks) to help you implement support for older browsers when using newer features like vh, vw etc.

1

https://jsfiddle.net/r8dz1sa5/2/maybe this is what you are looking for. And div take the height 100% what inside on it. Thats why we change the div height to screen height you can set it inline just replace the height with "vh" Viewport units: vw, vh, vmin, vmax

<div id="mobile" style="width: 100%;height: 100vh;background-color: blue;"> 
1

1) Set html as height: 100%; too.

2) body may be higher than the screen. So it's better to use min-height: 100%; for body.

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      html {   
        height: 100%;
      }
      body {   
        min-height: 100%;
        margin: 0 auto; 
        background: yellow;
      }	
    </style>
  </head>
  <body>
    <div id="mobile" style="width: 100%;height: 100%;background-color: blue;">
      Test text
    </div>
  </body>
</html>

0
0

Problem with the solution above is when the text overflows the body, you still get a yellow background see this first snippet: https://jsfiddle.net/t6effobg/1/

This is in my opinion a better one. Add "min-height:100%" on the mobile ID instead of height so it always fits it's parent: https://jsfiddle.net/t6effobg/

0

you need this:

html, body {
  height: 100%;
}

Otherwise the DIV`s 100% height have no reference height.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.