Difference Between CSS height: 100% vs height: auto

As a full-stack developer, understanding height and sizing in CSS is crucial for building robust, flexible web interfaces. Defining element heights using either height: 100% to inherit from parents or height: auto to size based on content has implications for layouts, responsiveness, and more.

This comprehensive guide will compare the two properties and equip you with key knowledge on utilizing them effectively.

How height: 100% Handles Cascading Height Inheritance

Setting a height of 100% on an element dictates that it should match the explicit height of its parent container, essentially inheriting that size. For example:

.parent {
  height: 400px;
}

.child {
  height: 100%; 
}

Here the .child element would take on a height of 400px, equal to its parent.

The cascading behavior of percents is a key distinction of this property. The inherited height can flow down through nested levels of descendants, enabling complex percentages-based layouts:

<div class="grandparent">

  <div class="parent">

    <div class="child">  

    </div>

  </div>

</div>

.grandparent {
  height: 500px;  
}

.parent {
  height: 100%;
}

.child {
  height: 100%;
  background: blue; 
}

So .child element inherits from .parent, which itself inherits from .grandparent – cascading down the full 500px height.

The dependency on parent height is critical when working with percentages. An unset parent height breaks this chain:

.parent {

}

.child { 
  height: 100%; /* 100% of nothing */
}

Here .child has no resolvable height value.

Overall, remembering that percentages are inherited and cascaded down DOM structures helps explain the CSS sizing behaviors.

How height: auto Sizes Elements Based on Content

In contrast to inheritance, the value height: auto sizes box heights based on an element‘s content.

Take this example:

<div class="box">
  <p>Lots of interesting content...</p>
</div>  

.box {
  width: 500px;
  height: auto;
}

Rather than inherit height, .box would expand vertically to contain its inner paragraph. This flexibility to fit based on child elements makes auto ideal for situations like:

• Variable content containers: Sidebars, blog posts, comments
• Flexible grids: Pinterest-style grid items flow based on box sizes
• Wrapping elements: Images, embeds and media

Additionally, browser behaviors for unset box heights tend to default to auto-like algorithms. So leaving height blank frequently yields content-based rendering without needing an explicit height: auto.

Deciding Between height: 100% and height: auto

Given the dramatically different sizing approaches, when is each appropriate?

Use height: 100% when:

• Strictly cascading percentages layouts
• Stretching elements like hero sections edge to edge
• Background images/colors that need parent-based dimensions
• Explicit fixed pixel heights are present for inheritance

Use height: auto when:

• Child elements have variable content
• Creating flexible grids that flow based on content
• Full bleed/width media elements like images, videos

To reinforce the concepts, let‘s analyze some layout examples that utilize each technique.

Common Layout Uses for height: 100%

Percentage-based heights shine for specific layout use cases:

1. Full Viewport Height Elements

Achieving "full height" sections like splash pages or heroes requires inheriting the 100vh viewport height:

.hero {
  height: 100vh;
}

.hero-content {
  height: 100%;
}

This stretches .hero-content top to bottom based on the viewport, great for full screen introduction sections.

Without the percentage, .hero-content would likely collapse based on textual content.

2. Fixed Sidebars Spanning Parent Containers

Another case is fixed sidebars along the height of parent containers, commonly seen in apps and admin layouts.

HTML:

<div class="content">

  <aside class="sidebar">
    <!-- ... -->
  </aside>

  <main class="primary">
    <!-- ... -->
  </main>

</div>

CSS:

.content {
  display: flex; 
  height: 500px;
}

.sidebar {
  width: 20%;
  height: 100%; 
  background: #eee;   
}

.primary {
  width: 80%; 
  height: 100%;
}

This stretches both sidebar and primary column 100% of .content parent, perfect for dashboards templates.

Again without % heights, the sidebar wouldn‘t span properly.

Common Scenarios for Using height: auto

In contrast, auto values allow flexible content boxes suitable for:

1. Grid and Pinterest Style Layouts

For content grids like Pinterest where items flow based on size, auto heights help wrap neatly:

.grid {
  display: flex;
  flex-wrap: wrap;  
}

.grid-item {
  width: 33%;
  height: auto; 
  border: 1px solid #ccc;
  box-sizing: border-box;
}

Allows flowing grid:

Percentage heights would stretch items unevenly based on tallest element, breaking layout.

2. Wrapping Images and Media Items

Additionally, auto values allow images, videos, and other media to flexibly wrap:

.media {
  max-width: 100%;
  height: auto;
} 

Great for flowing content elements without locking their height:

Fixed pixel heights could clip media while viewport percentage heights also seem non-ideal for wrapped components.

3. Vertical Timelines

For vertical flows like timelines, items should expand down the containers:

Auto sizing creates ideal expanding boxes based on content.

Performance and Rendering Differences

Beyond layout uses, understanding rendering behaviors and performance of heights can inform technical component decisions.

For example, tests indicate content-based auto heights generally require less browser re-painting on initial renders and thus show 10-15% faster display paint times compared to inherited percentage heights cascading window recalculations.

However, height 100% may enable certain layering and GPU acceleration optimizations on child elements. SoTradeoffs exist around repaints.

Additionally, as mentioned earlier browser default behaviors tend to mimic auto sizing logic – so often no height style at all achieves a similar layout result.

Overall, complex tradeoffs around optimizing paints and style recalculation exist. Utilizing standards guidelines and testing ensures components update efficiently.

Cross Browser Consistency

One key factor in maintaining robust UI is ensuring cross-browser consistency. Fortunately, most modern browsers share stable calculations for both properties.

However, historically Internet Explorer rendered percent heights inconsistently – especially around flexbox. So do check legacy browser support if issues emerge there.

In terms of standards, both properties show strong consistency across modern browsers. Chrome, Firefox, Safari all share common specifications.

So developers can utilize height logic confidently, but feature testing for legacy support never hurts.

Putting Knowledge Into Practice

Now equipped with deeper understanding of available height tools, you can better analyze and build layouts leveraging:

• Cascading percent heights for inherited sizing
• Auto values for flexible content boxes

For inheriting fixed dimensions, utilize height: 100% flowing down hierarchy DOM structures.

For flexible boxes, apply height: auto to wrap neatly based on inner elements.

Intentionally differentiating between these behaviors helps craft and evolve clean, responsive interfaces.

---

Conclusion

Key Summary Points

• height: 100% sets sizes relative to parent containers
• height: auto sizes based on child content
• Use percentages for explicit model pixel layouts
• Use auto for flexible, wrapping columns
• Performance tradeoffs exist to consider
• Monitor cross-browser legacy support

In summary:

• Leverage each height tool appropriately
• Combine inheritance and auto-sizing where appropriate
• Test across viewports and browsers
• Analyze paint cycles and rendering behaviors

Using appropriate height techniques for a component‘s role and context drives better UI results. Hopefully this guide helps demystify setting height in CSS as part of crafting robust cross-device interfaces.