Height Styles with 960.css

960.css Grid Lightness Styles includes utility classes for managing the height of elements on your website. This guide covers the height classes available in the library.

Height Classes

Use the following height classes to control the height of elements:

• h-auto: Auto height (default)
• h-full: Full height (100%)
• h-screen: Full screen height (100vh)
• h-min-screen: Minimum screen height (min-height: 100vh)
• h-max-screen: Maximum screen height (max-height: 100vh)
• h-0, h-1, ..., h-96: Fixed height in pixels

Example:

<div class="h-auto">
  <!-- Element with auto height -->
</div>

<div class="h-full">
  <!-- Element with full height -->
</div>

<div class="h-screen">
  <!-- Element with full screen height -->
</div>

<div class="h-min-screen">
  <!-- Element with minimum screen height -->
</div>

<div class="h-max-screen">
  <!-- Element with maximum screen height -->
</div>

<div class="h-32">
  <!-- Element with fixed height of 32 pixels -->
</div>