KSS Style Guide

8 #Height Height

Classes for setting the height, max-height, an min-height of an element (or its children).

Source: dist/minimal/minimal.css, line 4138
Examples
Default styling
A div
.vh-0
Sets height to 0
A div
.vhmn-0
Sets min-height to 0
A div
.vhmx-0
Sets max-height to 0
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4379
Examples
Default styling
A div
.vh-1
Sets height to 1
A div
.vhmn-1
Sets min-height to 1
A div
.vhmx-1
Sets max-height to 1
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4405
Examples
Default styling
A div
.vh-2
Sets height to 2
A div
.vhmn-2
Sets min-height to 2
A div
.vhmx-2
Sets max-height to 2
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4431
Examples
Default styling
A div
.vh-3
Sets height to 3
A div
.vhmn-3
Sets min-height to 3
A div
.vhmx-3
Sets max-height to 3
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4457
Examples
Default styling
A div
.vh-4
Sets height to 4
A div
.vhmn-4
Sets min-height to 4
A div
.vhmx-4
Sets max-height to 4
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4483
Examples
Default styling
A div
.vh-p100
Sets height to p100
A div
.vhmn-p100
Sets min-height to p100
A div
.vhmx-p100
Sets max-height to p100
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4197
Examples
Default styling
A div
.vh-p25
Sets height to p25
A div
.vhmn-p25
Sets min-height to p25
A div
.vhmx-p25
Sets max-height to p25
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4145
Examples
Default styling
A div
.vh-p50
Sets height to p50
A div
.vhmn-p50
Sets min-height to p50
A div
.vhmx-p50
Sets max-height to p50
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4171
Examples
Default styling
A div
.vh-vh100
Sets height to vh100
A div
.vhmn-vh100
Sets min-height to vh100
A div
.vhmx-vh100
Sets max-height to vh100
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4353
Examples
Default styling
A div
.vh-vh25
Sets height to vh25
A div
.vhmn-vh25
Sets min-height to vh25
A div
.vhmx-vh25
Sets max-height to vh25
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4223
Examples
Default styling
A div
.vh-vh40
Sets height to vh40
A div
.vhmn-vh40
Sets min-height to vh40
A div
.vhmx-vh40
Sets max-height to vh40
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4249
Examples
Default styling
A div
.vh-vh50
Sets height to vh50
A div
.vhmn-vh50
Sets min-height to vh50
A div
.vhmx-vh50
Sets max-height to vh50
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4275
Examples
Default styling
A div
.vh-vh60
Sets height to vh60
A div
.vhmn-vh60
Sets min-height to vh60
A div
.vhmx-vh60
Sets max-height to vh60
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4301
Examples
Default styling
A div
.vh-vh75
Sets height to vh75
A div
.vhmn-vh75
Sets min-height to vh75
A div
.vhmx-vh75
Sets max-height to vh75
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/minimal/minimal.css, line 4327