Asked  7 Months ago    Answers:  5   Viewed   66 times

This is the entire code:

<body style="height: 100%; padding: 0; margin: 0;">
    <div style="background-color: green; height: 100%; width: 100%"></div>

Nothing appears. But if I remove the first line (the doctype), all of the page is green as expected.

I have two questions:

  1. How do I make the div fill the page without removing that tag?
  2. Why does removing the doctype make it work?



CSS height property, percentage values & DOCTYPE

The first part of your question asking how to apply a 100% height to your div has been answered several times by others. Essentially, declare a height on the root element:

html { height: 100%; }

A complete explanation can be found here:

  • Working with the CSS height property and percentage values.

The second part of your question has received much less attention. I'll try to answer that.

Why does removing the doctype make [the green background] work?

When you remove the DOCTYPE (document type declaration) the browser switches from standards mode to quirks mode.

In quirks mode, also known as compatibility mode, the browser simulates an old browser so it can parse old web pages – pages authored before the advent of web standards. A browser in quirks mode pretends to be IE4, IE5 and Navigator 4 so it can render old code as the author intended.

Here's how Wikipedia defines quirks mode:

In computing, quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.

Here's MDN's take:

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.

Now, here's the specific reason why the height: 100% in your code works in quirks mode but not in standards mode:

In standards mode, if the parent element has a height: auto (no height defined), then the percentage heights of child elements will also be treated as height: auto (as per the spec).

This is why the answer to your first question is html { height: 100%; }.

For height: 100% to work in your div, you must set a height on parent elements (more details).

In quirks mode, however, if the parent element has a height: auto, then the percentage heights of child elements are measured relative to the viewport.

Here are three references covering this behavior:



Here's what developers need to know in a nutshell:

A browser in quirks mode will render web pages in a way that is unpredictable, unreliable and often undesirable. So always include a DOCTYPE for the document to render in standards mode.

Selecting the right DOCTYPE used to be an ambiguous and somewhat confusing process with many DOCTYPE versions to choose from. But today the process is as simple as ever. Just use:

<!DOCTYPE html>
Tuesday, June 1, 2021
answered 7 Months ago

No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.

Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.

However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.

You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.

Simply add the following to the top of your CSS code:

* {box-sizing:border-box;}

This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.

This should sort out most (if not all) of the layout issues you've been having.

Hope that helps.

Saturday, August 7, 2021
answered 4 Months ago

As I found out, the work manager depends on the device manufacturer. In my case, it is an miui device, which does not allow work manager to work in case the app is killed or rebooted. The work manager worked when I provided the application with "autostart permission".

Tuesday, August 10, 2021
answered 4 Months ago

document.documentElement.scrollHeight I believe.

For viewport it's window.innerHeight for modern browsers.

If the above aren't what you want, here's a list of a bunch of them:

  • document.documentElement.[scrollHeight,clientHeight,offsetHeight]
  • document.body.[scrollHeight,clientHeight,offsetHeight]
  • window.[inner,outer][Height,Width] ( modern browsers only )
Saturday, August 14, 2021
answered 4 Months ago

This is related to the stretch default alignment of grid item.

Note: Since formulas calculated using only definite sizes, such as the stretch fit formula, are also definite, the size of a grid item which is stretched is also considered definite. ref

As you can see, the size is definite so can be used as reference for percentage.

Same logic for flexbox:

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved ref

Related question with non-intuive percentage behavior:

Tuesday, August 31, 2021
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :