Why Does Height 100% Work When Doctype Is Removed

Why does height 100% work when DOCTYPE is removed?

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:

https://www.cs.tut.fi/~jkorpela/quirks-mode.html
https://stackoverflow.com/a/1966377/3597276
https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior

TL;DR

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>

Why does min-height:100% not work since declaring a doctype?

When you remove the doctype the browser goes into quirks mode which does things differently to help older code that is not validated to render correctly.

Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago.

If you have height: 100% and the height of the parent element is auto then 100% means auto.

Only if the parent element has a defined height, i.e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.

So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

#mydiv {
    height: 100%;
}

Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?

Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago. If you have height: 100% and the height of the parent element is auto then 100% means auto.
Generally, you don't. It screams "layout table". That said, set heights or minimum heights on the html and body elements. There are other techniques, but I don't have a handy link at the moment as, oddly, I've never been in a position where I needed the technique.
It is what browsers are supposed to do, so …
Well, I am answering this question …

HTML5 Doctype removed height100% rendering

You need to add this:

html {height: 100%}
body {height: 100%}

100% is 100% of the inherited height.

Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height

Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.

So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.

See this example, to make it clearer:

html, body, .outer, .inner, .content {  height: 100%;  padding: 10px;  margin: 0;  background-color: rgba(255,0,0,.1);  box-sizing: border-box;}

<div class="outer">  <div class="inner">    <div class="content">      Content    </div>  </div></div>

Why are percentage heights working on children when the parent has no height defined?

Why setting 100% height on child (.inner) of flex item works? For every element in this code height is "set" to auto.

Since the beginnings of CSS in the 1990s, a percentage height on an in-flow child element has required a defined height on the parent element. Otherwise the child defaults to height: auto.

The only acceptable height reference on the parent has come from the height property. Other forms of height, such as min-height and max-height, have been invalid for this purpose.

Although the spec has never explicitly specified that the parent must use the height property – only the generic work "height" has been used – using the height property has become the traditional interpretation and predominant implementation across browsers.

In recent years, however, browsers have broadened their interpretation of spec language to include other forms of height, such as flex-basis.

So, in 2017, it's not surprising that height: 100% does not resolve to height: auto in all cases where the parent has no specified height.

Today's browsers may also seek a height reference from flex-grow, flex-basis, align-items or something else.

Here a some more details about the height property and percentage values:

Why is percentage height not working on my div?
Chrome / Safari not filling 100% height of flex parent
Why does my div height 100% work only when DOCTYPE is removed?

And then there are interventions:

An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

This is browsers makers basically saying: "Thanks for the spec guidance, but we know our users and we can do better." So they go off-script hoping to be more thoughtful and intuitive.

Here are several examples of possible Chrome interventions:

Why doesn't flex item shrink past content size?
pseudo element not aligning at top left corner
How to make images stay within the rows of a css grid container?
Google Chrome viewport-anchored expand direction with flexbox

So, between interventions and a broader interpretation of the rules, height: 100% may give full height even when the parent has no height defined.

How do .inner elements know that 100% height is the height of the highest flex child (.col-4) in a row?

They don't. They just stretch to the height of the container, who's height is set by the tallest item in the row.

!DOCTYPE html messing up with heights

I've just tested this and it works fine. I'm not sure what you have wrong, maybe you've accidentally missed something or have a typo?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {height: 100%}
        .block {
            position: relative;
            width: 33.33333%;
            height: 50%;
            float: left;
            padding: 0;
            overflow: hidden
        }
    </style>
</head>
<body>
<div class="block" style="background-color: aliceblue"></div>
<div class="block" style="background-color: cadetblue"></div>
<div class="block" style="background-color: azure"></div>
<div class="block" style="background-color: aquamarine"></div>
<div class="block" style="background-color: aqua"></div>
<div class="block" style="background-color: antiquewhite"></div>
</body>
</html>

Why does background-image show fully when html's height is set to 100%?

If you do not define the height of html but define a percentage height on body then that value is computed to auto.

From height (MDN):

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

Alternatively, you can use viewport units (e.g., vh). For example:

.pimg1 {
  background-image: url("../img/image1.jpg");
  min-height: 100vh;
}

… then you don't need to define the height on either html or body.

See CSS values and units (MDN)

Why Does Height 100% Work When Doctype Is Removed