Height

Ready Added in 2.0.0

Define the height of elements depending on the viewport or match the heights of different elements.

Gloss’s Height component offers three options to set heights: using simple fixed height utility classes, depending on the viewport or by matching the heights of different elements.

Usage

Gloss provides a number of useful classes to alter an element’s height.

Class Description
.gls-height-1-1 This class applies a height of 100%. This only works if the parent element has a set height.
.gls-height-small
.gls-height-max-small 		These classes apply a height or max-height of 150px.
.gls-height-medium
.gls-height-max-medium 		These classes apply a height or max-height of 300px.
.gls-height-large
.gls-height-max-large 		These classes apply a height or max-height of 450px.
.gls-height-xlarge
.gls-height-max-xlarge 		These classes apply a height or max-height of 600px.
.gls-height-2xlarge
.gls-height-max-2xlarge 		These classes apply a height or max-height of 750px. 
<div class="gls-height-small"></div>
  • Small
    Medium
    Large
  • <div class="gls-child-width-1-3@s" gls-grid>
    <div>
        <div class="gls-height-small gls-card gls-card-default gls-card-body gls-flex gls-flex-center gls-flex-middle">Small</div>
    </div>
    <div>
        <div class="gls-height-medium gls-card gls-card-default gls-card-body gls-flex gls-flex-center gls-flex-middle">Medium</div>
    </div>
    <div>
        <div class="gls-height-large gls-card gls-card-default gls-card-body gls-flex gls-flex-center gls-flex-middle">Large</div>
    </div>
</div>

Viewport height

Add the gls-height-viewport attribute to create a container that fills the height of the entire viewport. You can change the height behavior by adding the offset-top, offset-bottom or expand option to the attribute. Learn more

Option Value Default Description
offset-top Boolean false Subtracts the element’s top offset from its height.
offset-bottom Boolean, Number, Pixel, CSS Selector false Subtracts the height (true) of the sibling that immediately follows the element, the given percentage (Number), Pixel (px) value from element’s own height or the given element’s height.
expand Boolean false Expands the element’s height to make a short page fill the viewport.
min-height Number 0 Sets a minimum height. Useful if all children are positioned absolute. 
<div gls-height-viewport></div>

<div gls-height-viewport="offset-top: true"></div>

<div gls-height-viewport="offset-bottom: 20"></div>

<div gls-height-viewport="expand: true"></div>

<div gls-height-viewport="min-height: 300"></div>

You can view examples in the tests for Height Viewport and Height Expand.

Match height

To expand all children of a container to the same height regardless of their content, for example inside a grid, add the gls-height-match attribute. You can change the height matching behavior by setting the target or row option to the attribute. Learn more

Option Value Default Description
target CSS selector > * Elements that should match. By default, direct children will match.
row Boolean true If your targets wrap into multiple rows, only grid columns within the same row are matched. 
<div gls-height-match>
    <div></div>
    <div></div>
</div>

target is the Primary option, and its key may be omitted if it’s the only option in the attribute value.

<span gls-height-match=".my-class"></span>

Match cards

You can also target and match specific elements inside the container, like cards. Just add the target: SELECTOR option to the attribute.

<div gls-grid gls-height-match="target: SELECTOR">...</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem Ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem Ipsum
  • <div class="gls-child-width-1-2@s" gls-grid gls-height-match="target: > div > .gls-card">
    <div>
        <div class="gls-card gls-card-default gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Lorem Ipsum</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Lorem Ipsum</div>
    </div>
</div>

Match all

If your grid wraps into multiple rows, only grid columns within the same row are matched. To match grid columns across all rows, just add the row: false option to the attribute.

<div gls-grid gls-height-match="row: false">...</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem Ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem Ipsum
  • <div class="gls-child-width-1-2@s" gls-grid gls-height-match="target: > div > .gls-card; row: false">
    <div class="gls-first-column">
        <div class="gls-card gls-card-default gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Lorem Ipsum</div>
    </div>
    <div class="gls-grid-margin gls-first-column">
        <div class="gls-card gls-card-default gls-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div class="gls-grid-margin">
        <div class="gls-card gls-card-default gls-card-body">Lorem Ipsum</div>
    </div>
</div>

Component options

The table below lists the available settings of the gls-height-match attribute. Learn more

Option Value Default Description
target CSS selector > * Elements that should match. By default, direct children will match.
row Boolean true If your targets wrap into multiple rows, only grid columns within the same row are matched.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.heightMatch(element, options);