Skip to content

Commit e53bf91

Browse files
feat: add dvh-100 and min-dvh-100 utility classes (#3990)
1 parent efcc0a4 commit e53bf91

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

styles/scss/core/_utilities.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,27 @@ $indexes: map.merge(
122122
}
123123
}
124124
}
125+
126+
// Dynamic viewport
127+
//
128+
// Following the pattern of `vh-100` and `min-vh-100` from
129+
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_sizing.scss
130+
//
131+
// More info on MDN
132+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length#dynamic_viewport_units
133+
134+
.dvh-100 {
135+
// fallback for browsers that don't support dynamic viewport units
136+
height: 100vh !important;
137+
138+
// dynamic units for modern browsers
139+
height: 100dvh !important;
140+
}
141+
142+
.min-dvh-100 {
143+
// fallback for browsers that don't support dynamic viewport units
144+
min-height: 100vh !important;
145+
146+
// dynamic units for modern browsers
147+
min-height: 100dvh !important;
148+
}

0 commit comments

Comments
 (0)