Height of Parent Div Is Zero Even If It Has Child with Finite Heights

<button>Add div</button>
<div class="items">
    <div class="data"></div>
    <div class="data"></div>
</div>

<style>
    .items {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        top: 6%;
        left: 15%;
        width: 70%;
        background-color: gold;
    }

    .data {
        width: 100%;
        height: 75px; /* Fixed height here */
        background-color: #187bcd;
        border-top: 2px solid #000000;
    }
</style>

<script>
    const button = document.querySelector('button');
    const div = document.querySelector('div.items');

    button.addEventListener('click', () => {
        const newDiv = document.createElement('div');
        newDiv.className = 'data';
        div.appendChild(newDiv);
    });
</script>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

After using .height() on parent div, child elements that change heights no longer effect the parent's height, why?

.height() is locking the div's height to whatever you specify, by directly setting the CSS style for the DOM element. You should explicitly unset the CSS style if you want it back to normal:

$('#parent').css('height', '')

In Which case parent Node does not include height of child Node in CSS?

floated elements are not counted as part of the parent's height.

Unless said parent has overflow:hidden.

(Or you can use a clearfix, but overflow:hidden is generally better)

CSS: Percentage height computed as zero. Why?

Because when you float header's content elements they're removed from the flow of the document and header collapses because it essentially has no content.

Add overflow:auto to your header's CSS rules and you'll get a height restored.

jsFiddle example

HTML div elements not taking the height of their parent, even though the parent has nonzero height

It's a common misconception about height: 100%.

From 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.

One solution to your problem could be absolute positioning. Set position: relative on your container and position the children absolutely. Setting top: 0; bottom: 0; on them will stretch them to the container's height.

Quick Demo (shows the concept, you might need to tweak it)

If parent div has no children showing then show a certain different child div

Yes!

I've came up with a pure CSS solution, because combining selectors is awesome:

Consider the following setup:

.container {  margin: 10px;  border: 1px solid #000;}
.room {  width: 100px;  height: 75px;  background-color: #F00;}
.hidden {  display: none;}
.placeholder {  display: block;}
.room:not(.hidden) ~ .placeholder {  display: none;}

<div class="container">  <div class="room hidden"></div>  <div class="room hidden"></div>  <div class="room hidden"></div>  <div class="room hidden"></div>  <div class="placeholder">No rooms available!</div></div>  <div class="container">  <div class="room hidden"></div>  <div class="room"></div>  <div class="room"></div>  <div class="room hidden"></div>  <div class="placeholder">No rooms available!</div></div>