#Min Height

Classes to set the minimum height of an element.

min-height: 0;

min-height: 10%;

min-height: 20%;

min-height: 30%;

min-height: 40%;

min-height: 50%;

min-height: 60%;

min-height: 70%;

min-height: 80%;

min-height: 90%;

min-height: 100%;

min-height: 100vh;

#Examples

Using these classes it quite simple to control the minimum height an element should have. You can either use a percentage based class or use a class to span the whole screen using the min-h-[size] syntax.

<div class="p-4 bg-pink-100 u-round-xs text-white font-bold u-text-center">
    <div class="min-h-100p p-2 bg-pink-500 u-round-xs">min-h-100p</div>
</div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$MIN-HEIGHT: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want min-h-0 to be applied to some element for lg and above, then I would use the min-h-0-lg class.

<div class="min-h-0-lg">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting minimum heights. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        min-heights: (
            '25p': '25%',
        )
    )
) !default;

This would generate the following additonal classes.

.min-h-25p {
    min-height: 25% !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.