Why is percentage height not working on my div?

Unfolding the magic behind percentage heights

When setting an element's height using percentages, ensure that all parent elements have a specified height. It's because percentages, by their nature, require a reference to calculate. Browsers tend to default to an 'auto' height when the parent's height is unspecified, causing child elements' percentage heights to fail, leading to inconsistent results. 🥴

Percentage heights made easy with viewport units (vh)

If you don't want to deal with the fuss of setting percentage heights with nested dependencies, Viewport units (vh) come to the rescue. They provide a robust reference, relying on the viewport’s height across browsers:

<style>
  /* Didn't get enough sleep, using vh instead! */
  .viewport-height { height: 50vh; }
</style>
<div class="viewport-height">50% of my height is fixed to viewport, easy peasy!</div>


Absolute positioning: The wildcard

An element with absolute positioning plays by a different set of rules. It bases its percentage height on its closest positioned ancestor, not necessarily the immediate parent. One thing to bear in mind here is the ancestor must have a defined height.

<style>
  /* Like an Avengers, playing by its own rules */
  .positioned-container { position: relative; height: 300px; }
  .absolute-child { position: absolute; height: 50%; }
</style>
<div class="positioned-container">
  <div class="absolute-child">Like Antman, 50% relative to the positioned container</div>
</div>


Overflowing content? No problem!

When the content has the potential to overflow the height of div, the overflow property is your friend. It specifies how to handle the content that is too big for its boots:

.overflow-control { height: 50%; overflow: auto; }


The nitty-gritty of percentage heights

Establishing frame of reference

It's an essential rule of thumb that divs determine their percentage heights based on their containing block. Without a logical context, percentage heights yield undefined behavior.

Wrappers to the rescue

Remember this simple trick – using a wrapper div with vh for percentage-based child elements helps maintain consistency and control, regardless of parent element heights:

<div style="height: 100vh;">
  <!-- Percentage-based child elements heave a sigh of relief -->
</div>


When auto is the default

Recall that when parent heights are unspecified, browsers render it as 'auto'. This default behavior is the common culprit behind collapsing nested elements with percentage heights.

Testing across browsers

Ensure consistent output by testing the layouts in different browsers. Browsers are like humans; they interpret things, especially involving percentage and viewport units, differently, so cross-browser testing is necessary for uniformity.

Debugging: Thou art human

Always remember to check for syntax errors in CSS and ensure that you’ve used correct element names. Proper styling can go for a toss with the tiniest oversight. Reread. Debug. Repeat. Your journey to become the Sherlock Holmes of code!