height | HTML ΠΈ CSS Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
Π·Π°Π΄Π°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ² height
, max-height
ΠΈ min-height
.
ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠΎΡΡ (height
) ΠΌΠ΅Π½ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ min-height
, ΡΠΎ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΡΠ°Π²Π½ΠΎΠΉ min-height
.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
/* <length> value */
min-height: 3.5em;
/* <percentage> value */
min-height: 10%;
/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;
/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ (px), ΠΏΡΠΎΡΠ΅Π½ΡΡ (%) ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΏΡΠΈΠ½ΡΡΡΠ΅ Π² CSS. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ.
auto
- ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° Π΄Π»Ρ flex-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΡΠΌΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠ΅ΠΌ
0
Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. max-content
- ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°.
min-content
- ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°.
fill-available
- ΠΡΡΠΎΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΌΠΈΠ½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅
margin
,border
, ΠΈpadding
. (ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅Π΅ ΠΈΠΌΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°available
.) fit-content
- Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ CSS3 Box, ΡΡΠΎ ΡΠΈΠ½ΠΎΠ½ΠΈΠΌ min-content. CSS3 Sizing ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΉ Π°Π»Π³ΠΎΡΠΈΡΠΌ, Π½ΠΎ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ Π΅Π³ΠΎ Π΄Π°ΠΆΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΡΡΠ΅ΠΌ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΡΠΎΠΌΠ΅ ΡΡΡΠΎΡΠ½ΡΡ ΠΈ ΡΠ°Π±Π»ΠΈΡ
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>min-height</title> <style> footer { background: #66806e url(/example/image/clover.png) no-repeat 20px bottom; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΎΠ½Π° */ min-height: 80px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° */ color: #e4bc96; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ padding: 5px 5px 5px 140px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ } footer p { margin: 5px 0; } footer a { color: #fffde0; } </style> </head> <body> <footer> <p>Π‘Π°ΠΉΡ Cloverfield</p> <p> <a href="page/techinfo.html">ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ°ΠΉΡΠ΅</a> <a href="page/activity.html">ΠΠ± Π°Π²ΡΠΎΡΠ΅</a> </p> </footer> </body> </html>
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-height
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½ΠΎ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ, ΡΡΠΎΠ±Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° height ΡΡΠ°Π»ΠΎ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ min-height.
Min-height ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² height ΠΈ max-height.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»ΠΈΠ½Ρ CSS (px, pt, em ΠΈ Ρ. Π΄.) ΠΈΠ»ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .
ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | none |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΡΠΎΠΌΠ΅ Π½Π΅Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ, Π³ΡΡΠΏΠΏ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. |
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅ | ΠΠ°. ΠΡΡΠΎΡΠ° Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠ°. |
ΠΠ΅ΡΡΠΈΡ | CSS2 |
DOM ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ | object.style.minHeight = «100px»; |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡΒΆ
min-height: length | initial | inherit;
ΠΡΠΈΠΌΠ΅ΡΒΆ
<!DOCTYPE html>
<html>
<head>
<title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title>
<style>
div {
min-height: 50px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h3>ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° min-height</h3>
<div>ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°Π²Π½Π° 50px.</div>
</body>
</html>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ! Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°Π²Π½Π° «3cm»:
ΠΡΠΈΠΌΠ΅ΡΒΆ
<!DOCTYPE html>
<html>
<head>
<title>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title>
<style>
p {
background-color: #ccc;
}
p.example {
min-height: 3cm;
}
</style>
</head>
<body>
<h3>ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° min-height</h3>
<h4>Min-height: none.</h4>
<p>Lorem Ipsum - ΡΡΠΎ ΡΠ΅ΠΊΡΡ-"ΡΡΠ±Π°", ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π² ΠΏΠ΅ΡΠ°ΡΠΈ ΠΈ Π²ΡΠ±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. </p>
<h4>Min-height: 3cm.</h4>
<p>Lorem Ipsum - ΡΡΠΎ ΡΠ΅ΠΊΡΡ-"ΡΡΠ±Π°", ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π² ΠΏΠ΅ΡΠ°ΡΠΈ ΠΈ Π²ΡΠ±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.</p>
</body>
</html>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ! ΠΠ½Π°ΡΠ΅Π½ΠΈΡΒΆ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
auto | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
length | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ (px, pt, cm ΠΈ Ρ.Π΄.). ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — 0. |
% | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ . |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-height | Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅ΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height Π·Π°Π΄Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π²ΡΡΠΎΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’.Π΅. Π΅ΡΠ»ΠΈ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ ΠΌΠ΅Π½ΡΡΠ΅ min-height, ΡΠΎΠ³Π΄Π° Ρ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΡΠΎΡΠ° ΡΠ°Π²Π½Π° min-height. ΠΡΠ»ΠΈ ΠΆΠ΅ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠΎΠ³Π΄Π° Π²ΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° Π²ΡΡΠΎΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΡΡ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½Π°Ρ ΡΠ°ΡΡΡ + Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ (padding-top, padding-bottom) + ΡΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡ (border-top, border-bottom).
ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
- β ΡΠΎΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ Π΄Π»ΠΈΠ½Ρ (px — ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, in — Π΄ΡΠΉΠΌΡ, cm — ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ, pt — ΠΏΡΠ½ΠΊΡΡ)
- β ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ
- none β Π½Π΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ
- inherit β Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | 0 |
---|---|
ΠΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ | ΠΊΠΎ Π²ΡΠ΅ΠΌ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π° ΡΠ°ΠΊ ΠΆΠ΅ img ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ°Π±Π»ΠΈΡ (ΠΊΡΠΎΠΌΠ΅ colgroup ΠΈ col) |
ΠΠ°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ | Π½Π΅Ρ |
ΠΠ΅ΡΡΠΈΡ CSS | CSS 2 |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ |
|
ΠΡΠΈΠΌΠ΅Ρ
p {
min-height: 20px;
}
Π’Π²ΠΎΠΉ ΠΊΠΎΠ΄:
<html> <head> <title></title> <style type=»text/css»> <!— p { min-height: 60px; background: yellow; } —> </style> </head> <body> <p>ΠΡΠΎΡ Π°Π±Π·Π°Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 60px ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ </p> </body> </html>Π‘Π΄Π΅Π»Π°ΠΉ ΠΊΠΎΠ΄ ΠΈ ΠΆΠΌΠΈ ΡΡΡ
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½ΠΠ°ΠΌΠ΅ΡΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-width Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ max-widthMin ΠΈ Max Width/Height Π² CSS
Π ΠΏΡΠΎΡΠ΅ΡΡΠ΅ Π²Π΅ΡΡΡΠΊΠΈ Ρ ΠΌΠ΅Π½Ρ Π½Π΅ΠΌΠ°Π»ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π· Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π²ΡΠ΅Π³Π΄Π° ΡΡΠ°ΡΠ°Π»ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡ Π»ΡΡΡΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Π±Ρ Ρ ΠΎΡΠ΅Π» ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΠΏΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡΠΈΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ².
1) ΠΠ»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΠΈΠ»ΠΈ «ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ » Π΄ΠΈΠ²ΠΎΠ²) ΡΡΠΎΠΈΡ Π·Π°Π΄Π°Π²Π°ΡΡ padding ΠΈ min-width
ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π΅ Π±ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ Π² ΡΠ»ΡΡΠ°Π΅ ΠΊΠΎΡΠΎΡΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°, Π° Π² ΡΠ»ΡΡΠ°Π΅ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΎΠ½ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡ ΠΊ ΠΊΡΠ°ΡΠΌ
2) ΠΠ»Ρ Π±Π»ΠΎΠΊΠΎΠ² Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΡΠΎΠΈΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠ΅ΡΡΡ min-height ΠΈ padding
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ ΠΈΠ·Π±Π΅ΠΆΠΈΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°, ΡΠ΅ΠΊΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅Π·ΠΆΠ°ΡΡ Π·Π° ΠΊΡΠ°Ρ. ΠΡΠ΅Π½Ρ ΡΠ°ΡΡΠ°Ρ ΠΎΡΠΈΠ±ΠΊΠ° Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² — ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΠΎ height
3) ΠΠ»Ρ «ΡΠ°Π±ΠΎΠ²» ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ min-width ΠΈ max-width
ΠΠΎ Π² ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΡΠ΅ΡΠ΅Π½Π½ΡΠΌ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ: ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ? ΠΠ»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ 3 ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½ΠΈΠΆΠ΅:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
ΠΠ°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ: https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
4) ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΊΡ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π²Π½ΡΠ΅ΡΡΡ ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
ΠΡΠΎΡ ΠΏΡΠ½ΠΊΡ ΠΎΡΡΠ°ΡΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΏΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠΎΠ±ΠΈΡΠ°Π»ΡΡ Π΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ β ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΡΠΌ ΠΈ ΠΊΠΎΡΠΎΡΠΊΠΈΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ.
ΠΠΎ ΡΡΠΎΡ Π»Π°ΠΉΡΡ Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎ ΠΌΠ½Π΅ Π½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ, ΠΊ Π΄Π°Π½Π½ΠΎΠΉ ΡΠ΅ΠΌΠ΅ ΠΎΠ½ ΡΠΎΠΆΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ, ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ ΠΎΠ½ Π²ΡΡΡΡΠ°Π» ΠΌΠ΅Π½Ρ ΡΠΆΠ΅ Π΄Π²Π°ΠΆΠ΄Ρ Π·Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ 2 Π½Π΅Π΄Π΅Π»ΠΈ (!)
Π‘ΠΈΡΡΠ°ΡΠΈΡ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ: ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅Π·ΠΊΡ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ· ΠΏΡΠ½ΠΊΡΠ° 3, Π½ΠΎ Π²Π΄ΡΡΠ³ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ Ρ Π²Π°Ρ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ: ΡΠ΅ΠΊΡΡ Π²ΡΠ»Π΅Π·Π°Π΅Ρ Π·Π° ΠΊΡΠ°Ρ. Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΊΡ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ:
ΠΡΠ΅ Π΄Π΅Π»ΠΎ Π²ΠΎΡ Π² ΡΠ΅ΠΌ: ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΊΡ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΌΠ΅Π½ΡΡΠ΅ Π΄Π»ΠΈΠ½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°: ΡΠΎ Π΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ min-width: ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ min-width: 0:
ΠΠ°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ: https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
5) ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΊΡ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π²Π½ΡΠ΅ΡΡΡ Π²ΡΡΠΎΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
ΠΡΠ½ΠΊΡ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΠΏΡΠ½ΠΊΡΡ 4, ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ Π΅Π³ΠΎ Ρ Ρ ΠΎΡΠΎΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ: Π΅ΡΠ»ΠΈ ΡΠΊΠ°Π·Π°ΡΡ Π±Π»ΠΎΠΊΡ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π±Π»ΠΎΠΊΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ overflow-y: scroll, height: 100%, ΡΠΎ ΡΡΠΎ Π½ΠΈ ΠΊ ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ
ΠΠ΄Π΅ΡΡ ΡΠ°ΠΊ ΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ min-height: 0:
ΠΠ°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ: https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ Π²Π°ΠΌ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌΠΈ, Π½ΠΎ Π² Π½Π΅Π΄Π°Π²Π½Π΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Ρ ΠΌΠ΅Π½Ρ Π±ΡΠ»Π° Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠ°ΡΠ° Π² Π³ΠΎΠ»ΠΎΠ²Π΅ ΠΈ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌ Ρ ΡΠΌΠΎΠ³ Π»ΡΡΡΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΠΈ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ Π²Π΅ΡΡΡΠΊΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π’Π΅ΠΏΠ΅ΡΡ Π²Π΅ΡΡΡΠ°ΡΡ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π»ΡΡΡΠ΅)
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΈ ΡΠΎΠ²Π΅ΡΡ ΠΏΠΎΠΊΠ°ΠΆΡΡΡΡ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ! π
html — min-height 100vh ΡΠΎΠ·Π΄Π°Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
Π― ΠΏΡΠΈΠΌΠ΅Π½ΡΡ min-height: 100vh;
ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ flexbox ΠΈ ΠΏΠΎΠ»ΡΡΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ justify-content: space-around;
Π― Π½Π΅ Ρ ΠΎΡΡ ΡΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡΠΎΡΡ, Π½ΠΎ Ρ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΠΏΠΎΡΠ΅ΠΌΡ Π΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅Π½ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΠ΅ΠΌ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet"/>
<div>
<div>
<h2>min-height: 100vh;</h2>
<h3>why is there a scrollbar here?</h3>
</div>
<div>
Be sure to expand window.
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
</div>
</div>
14
George Katsanos 28 Π€Π΅Π² 2017 Π² 15:13
2 ΠΎΡΠ²Π΅ΡΠ°
ΠΡΡΡΠΈΠΉ ΠΎΡΠ²Π΅Ρ
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ flex-grow, ΠΏΠΎΡ ΠΎΠΆΠ΅, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-around;
}
ΠΠ΅ Π·Π½Π°Ρ ΠΏΠΎΡΠ΅ΠΌΡ, Π½ΠΎ height: 100%
Π½Π° .wrapper
, ΠΏΠΎΡ
ΠΎΠΆΠ΅, Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, Π΅ΠΌΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ flex-grow
. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ justify-content: space-around
ΠΏΡΠΈΠ±Π°Π²ΠΈΠ» Π»ΠΈΡΠ½ΠΈΠΉ ΠΏΡΠΎΠ±Π΅Π», ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π» Π²ΡΡΠΎΡΡ. ΠΠ΅ ΡΠ²Π΅ΡΠ΅Π½ Π² ΠΌΠΎΠΈΡ
ΡΠ°ΡΡΡΠΆΠ΄Π΅Π½ΠΈΡΡ
, Π½ΠΎ, ΠΏΠΎΡ
ΠΎΠΆΠ΅, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ …
10
Jazcash 28 Π€Π΅Π² 2017 Π² 12:50
ΠΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΠΎΡΠ²Π΅ΡΠ΅ @ Jazcash Π²ΡΡΠ΅, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠΎΡΡΠΈΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅.
ΠΠΎ ΡΡΡΠΈ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ min-height: 100vh
ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π½Π΅ΠΌΡ display: flex
. flex-grow
Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ.
https://jsfiddle.net/gkatsanos/uxgaaccr/3/
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: space-around;
}
<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet"/>
<div>
<div>
<h2>min-height: 100vh;</h2>
<h3>why is there a scrollbar here?</h3>
</div>
<div>
Be sure to expand window.
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
</div>
</div>
3
George Katsanos 28 Π€Π΅Π² 2017 Π² 12:56
CSS min-height Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΡΠΈΠΌΠ΅Ρ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
p.ex1
{
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΉ.
ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ,
min-height
ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ height Π½Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°
.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | 0 |
---|---|
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: | Π½Π΅Ρ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΠΉ: | Π΄Π°, ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° .ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΡΠΎ animatable ΠΠΎΠΏΡΡΠ°ΠΉΡΡ |
ΠΠ΅ΡΡΠΈΡ: | CSS2 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | ΠΎΠ±ΡΠ΅ΠΊΡ .style.minHeight = «400px» ΠΠΎΠΏΡΡΠ°ΠΉΡΡ |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΠ±ΡΠ΅ΠΊΡ | |||||
---|---|---|---|---|---|
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ° | 1.0 | 7,0 | 3,0 | 2.0.2 | 4,0 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: Π΄Π»ΠΈΠ½Π° | Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΠΈ
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊCSS: Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° CSS
Π‘ΡΡΠ»ΠΊΠ° CSS: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-height
Π‘ΡΡΠ»ΠΊΠ°HTML DOM: minHeight ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ° | CSS-ΡΠ»ΠΎΠ²ΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
Π² CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
Π²ΡΠ΅Π³Π΄Π° ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠ°ΠΊ height
, ΡΠ°ΠΊ ΠΈ max-height
. ΠΠ²ΡΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»ΠΈΠ½Ρ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ.
.wrapper {
Π²ΡΡΠΎΡΠ°: 100%; / * ΠΏΠΎΠ»Π½Π°Ρ Π²ΡΡΠΎΡΠ° ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ * /
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: 20em; / * ΠΠ£ΠΠΠ’ ΠΠΠΠΠΠ£Π Π²ΡΡΠΎΡΠΎΠΉ 20em * /
}
.wrapper {
Π²ΡΡΠΎΡΠ°: 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; / * ΠΡΠ΄Π΅Ρ ΠΠ ΠΠΠΠ¬Π¨Π 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ: ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΡΠΎΡΡ * /
}
.wrapper {
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; / * ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΡΠΎΡΡ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ * /
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠ»ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π±ΠΎΠ»ΡΡΠ΅ ( Π²ΡΡΠΎΡΠ°
> ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°
ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ), Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ.Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΡΠΎΠΌΠ΅ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ
Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π±Π»ΠΈΡΡ ΠΈ Π³ΡΡΠΏΠΏ ΡΡΠΎΠ»Π±ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, colgroup
, col
).
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
ΠΡΠ΅ | ΠΡΠ΅ | ΠΡΠ΅ | ΠΡΠ΅ | ΠΡΠ΅ | ΠΡΠ΅ | Android Firefox | ΠΡΠ°ΡΠ·Π΅Ρ Android | iOS Safari | Opera Mobile |
ΠΡΠ΅ | ΠΡΠ΅ | ΠΡΠ΅ | ΠΡΠ΅ | 59+ |
Π‘ΠΎΠΏΡΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
CSS: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-height
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ CSS ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ min-height Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS min-height ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° min-height:
. min-height: value;
ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΈΠ»ΠΈ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ
- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
-
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , em ΠΈ Ρ. Π.
div {ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
div {ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 40em; }ΠΏΡΠΎΡΠ΅Π½Ρ ΠΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
div {min-height: 50%; }ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
div {min-height: inherit; }
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
- ΠΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»Ρ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS min-height ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΈ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS min-height ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΡΠΎΡΠ° CSS ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»Π°ΡΡ ΠΌΠ΅Π½ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ CSS min-height.
- ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , ΠΎΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π²ΡΡΠΎΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
- Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅ height, width, max-height, max-width, min-width.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS min-height ΠΈΠΌΠ΅Π΅Ρ Π±Π°Π·ΠΎΠ²ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ :
- Π₯ΡΠΎΠΌ
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Π’Π΅Π»Π΅ΡΠΎΠ½
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
ΠΡΠΈΠΌΠ΅Ρ
ΠΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-height Π½ΠΈΠΆΠ΅, ΠΈΡΡΠ»Π΅Π΄ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² CSS.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ CSS, Π³Π΄Π΅ ΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π²ΡΡΠ°ΠΆΠ΅Π½Π½ΠΎΠ΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
div {ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ CSS Π²ΡΡΠΎΡΠ° ΡΠ΅Π³Π°
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡΠ°Π·ΠΈΡΡ min-height ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² em.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
div {ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 50em; }
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ CSS Π²ΡΡΠΎΡΠ° ΡΠ΅Π³Π°
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΠ°
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ CSS, Π³Π΄Π΅ ΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .
div {min-height: 75%}
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ CSS Π²ΡΡΠΎΡΠ°
Β· ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ WebPlatform
Π‘Π²ΠΎΠ΄ΠΊΠ°
ΠΠ°Π΄Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΏΡΠ΅Π²ΡΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.ΠΠ½ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ height, ΡΠ°ΠΊ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-height, Π΅ΡΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ ΠΈΠ· Π½ΠΈΡ ΡΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ min-height.
ΠΠ±Π·ΠΎΡΠ½Π°Ρ ΡΠ°Π±Π»ΠΈΡΠ°
- ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
-
Π°Π²ΡΠΎ (0 Π΄Π»Ρ Π½Π΅Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²)
- ΠΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ
- ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΡΠΎΠΌΠ΅ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π±Π»ΠΈΡΡ ΠΈ Π³ΡΡΠΏΠΏ ΡΡΠΎΠ»Π±ΡΠΎΠ²
- Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ
- ΠΠ΅Ρ
- ΠΠ΅Π΄ΠΈΠ°
- Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ
- Π Π°ΡΡΠ΅ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
- Π£ΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ Π΄Π»ΠΈΠ½Π°
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ
- ΠΠ°
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS
-
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°
- Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
- Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΡΠΎΠ³Π΄Π° ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ°Π²Π½ΡΠΌ 0.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
-
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ
-
min-height: calc
-
min-height: Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ
-
min-height: fit-content
-
min-height: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
-
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: Π΄Π»ΠΈΠ½Π°
-
min-height: max-content
-
min-height: min-content
-
min-height: ΠΏΡΠΎΡΠ΅Π½Ρ
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- Π°Π²ΡΠΎ
- ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.ΠΠ΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ 0 Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΎΡ Flexbox. ΠΠ° flexbox Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ min-content.
- Π΄Π»ΠΈΠ½Π°
- ΠΠ°Π΄Π°Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π΄Π»ΠΈΠ½Ρ Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ.
- ΠΏΡΠΎΡΠ΅Π½Ρ
- <ΠΏΡΠΎΡΠ΅Π½Ρ> ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ, ΡΠΎ ΠΎΠ½ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ 0. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ.
- ΡΠ°ΡΡΠ΅Ρ
- ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠΌ. Π ΡΡΠ½ΠΊΡΠΈΠΈ css calc.
- Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
- ΠΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- ΠΌΠ°ΠΊΡ-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΠ·ΠΊΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΠΌΠΎΠ³Π»Π° Π±Ρ Π·Π°Π½ΡΡΡ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π²ΠΎΠΊΡΡΠ³ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»Π°ΡΡ Π½ΠΈ ΠΎΠ΄Π½Π° ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΌΡΠ³ΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ (ΠΏΡΠΎΠ±Π΅Π» / ΠΏΡΠ½ΠΊΡΡΠ°ΡΠΈΡ Π² ΡΠ΅ΠΊΡΡΠ΅ — ΠΏΡΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΡΠ³ΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ). Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠΎΠ΄ΡΠ»Ρ CSS Intrinsic & Extrinsic Sizing Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
- ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- Π‘Π°ΠΌΠ°Ρ ΡΠ·ΠΊΠ°Ρ ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΡΡΡ Π±Π»ΠΎΠΊ, Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡΠ°Ρ ΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ, Π²ΡΠ±ΡΠ°Π² Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΡΡ ΠΌΠ΅ΡΡ. ΠΡΡΠ±ΠΎ Π³ΠΎΠ²ΠΎΡΡ, ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ΄ΠΎΡΠ»Π° Π±Ρ ΠΊ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΡΠ³ΠΊΠΎΠΉ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠΎΠ΄ΡΠ»Ρ CSS Intrinsic & Extrinsic Sizing Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
- Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ
- ΠΠ°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈΠ· ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (Π²ΡΡΠΎΡΠ° ΠΌΠΈΠ½ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅, Π³ΡΠ°Π½ΠΈΡΠ° ΠΈ ΠΎΡΡΡΡΠΏ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°). Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠΎΠ΄ΡΠ»Ρ CSS Intrinsic & Extrinsic Sizing Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
- fit-content
- ΠΡΠ»ΠΈ ΠΎΠ±ΡΠ΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΠ°Π²Π½ΠΎ min (max-content, max (min-content, fill-available)). Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π²Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ max-content.Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠΎΠ΄ΡΠ»Ρ CSS Intrinsic & Extrinsic Sizing Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ min-height Ρ Π»ΡΠ±ΡΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ CSS, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ.
div {min-height: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
<ΡΡΠΈΠ»Ρ>
.without-min-height, .with-min-height {
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.with-min-height {
ΡΠΎΠ½: Π³ΠΎΠ»ΡΠ±ΠΎΠΉ;
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.without-min-height {
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
}
.ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ {
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ 1px;
ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ΅Π· ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ. ΠΡΡΠΎΡΠ° Π²Π·ΡΡΠ° ΠΈΠ· ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (Ρ ΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ).
Π‘ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ. ΠΠΎΠ½ΡΠ΅Π½Ρ (Ρ ΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ) ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ Π²Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° CSS Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ:
- min-height ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ max-height.ΠΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½Π°Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ.
- max-content, min-content, fit-content ΠΈ fill-available Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π½Π° ΡΡΠ°Π΄ΠΈΠΈ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ° W3C ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½Π΅ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° calc Π»ΡΡΡΠ΅ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎΠ³ΡΡ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠ².
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
- CSS 2.1 (Π Π°Π·Π΄Π΅Π» 10.7)
- Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ W3C
- ΠΠΎΠ΄ΡΠ»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² CSS, ΡΡΠΎΠ²Π΅Π½Ρ 3
- ΠΡΠ°Π΄ΠΊΠ° ΡΠ°Π±ΠΎΡΠΈΠΉ
Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅
Π‘ΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅
ΠΠΎΡΠΎΠ±ΠΊΠ° ΠΠΎΠ΄Π΅Π»Ρ
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΡΡΠΈΠ±ΡΡΡ
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ° | Codrops
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ½ΠΎΠ³Π΄Π° Π±ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ. ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π²Π° ΡΠ²ΠΎΠΉΡΡΠ²Π°: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-height
ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-height
.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° height
ΠΈ max-height
ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° height
ΠΌΠ΅Π½ΡΡΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΠ°ΠΌΠ΅ΡΠΊΠΈ
Π CSS3 Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° min-height
Π±ΡΠ»ΠΈ Π²Π²Π΅Π΄Π΅Π½Ρ Π½ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: [[<Π΄Π»ΠΈΠ½Π°> | <ΠΏΡΠΎΡΠ΅Π½Ρ>] && [Π³ΡΠ°Π½ΠΈΡΠ° | content-box]? ] | Π² Π½Π°Π»ΠΈΡΠΈΠΈ | ΠΌΠΈΠ½-ΠΊΠΎΠ½ΡΠ΅Π½Ρ | max-content | fit-content
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- <Π΄Π»ΠΈΠ½Π°>
-
ΠΠ°Π΄Π°Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π²ΡΡΠΎΡΡ.Π‘ΠΌ. ΠΠ°ΠΏΠΈΡΡ
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. - <ΠΏΡΠΎΡΠ΅Π½Ρ>
-
<ΠΡΠΎΡΠ΅Π½Ρ> ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π½Π΅ ΡΠΊΠ°Π·Π°Π½Π° ΡΠ²Π½ΠΎ (Ρ. Π. ΠΠ°Π²ΠΈΡΠΈΡ ΠΎΡ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ), ΠΈ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ
0
.Π‘ΠΌ. ΠΠ°ΠΏΠΈΡΡ <ΠΏΡΠΎΡΠ΅Π½Ρ> Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠ° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
- Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠΎΡΡ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
- Π² Π½Π°Π»ΠΈΡΠΈΠΈ
- ΠΡΡΠΎΡΠ° ΡΠ°Π²Π½Π° Π²ΡΡΠΎΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π·Π° Π²ΡΡΠ΅ΡΠΎΠΌ ΠΏΠΎΠ»Π΅ΠΉ, Π³ΡΠ°Π½ΠΈΡ ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ² ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- ΠΌΠ°ΠΊΡ-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
-
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°.
max-content
height — ΡΡΠΎ, Π³ΡΡΠ±ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Π²ΡΡΠΎΡΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈΠΌΠ΅Π» Π±Ρ, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π΅ Π±ΡΠ»ΠΈ Π²ΡΡΠ°Π²Π»Π΅Π½Ρ Β«ΠΌΡΠ³ΠΊΠΈΠ΅Β» ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ, ΡΠΎ Π΅ΡΡΡ Π΅ΡΠ»ΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π°Π±Π·Π°Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΠ΄Π½Ρ Π΄Π»ΠΈΠ½Π½ΡΡ ΡΡΡΠΎΠΊΡ. - ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
-
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°. ΠΡΡΠΎΡΠ°
min-content
— ΡΡΠΎ, Π³ΡΡΠ±ΠΎ Π³ΠΎΠ²ΠΎΡΡ, ΡΠ°ΠΌΠ°Ρ Π²ΡΡΠΎΠΊΠ°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΎΡΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π²ΠΎ Π²ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΡΠΎΡΠΊΠ°Ρ ΡΠ°Π·ΡΡΠ²Π°. - fit-content
-
Π’ΠΎ ΠΆΠ΅, ΡΡΠΎ ΠΈ
min-content
. - ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ
-
ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΎΡΠΈΡΡΠΊΠΈ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ². ΠΠ½ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ΅Π½
min-content
, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ ΡΠΊΡΡΠ΅Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±Π»ΠΎΠΊΠ° ΠΎΠ½ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ Π±ΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΠΎΠ»Ρ ΠΏΠΎΠ»Π΅ΠΉ Π»ΡΠ±ΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°ΡΡΠ²ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°, ΡΡΠΎ ΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ°.Π‘ΠΌ. ΠΠ°ΠΏΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
float
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ float, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΎΡΠΈΡΡΠΊΠ° float ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ² Π±ΡΠ»ΠΈ Π²Π²Π΅Π΄Π΅Π½Ρ Π² CSS3.
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ½ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ min-content
ΠΈ max-content
.
Π CSS3 ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΎΠ½ΠΎ Π΅ΡΠ΅ Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ.
ΠΠ°Π½ΠΊΠ½ΠΎΡΡ
ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ.
ΠΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ² (Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»ΠΈΠ½Ρ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ°) Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box-sizing, ΠΎΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠΎΡΡΡΠΏΠ½ΠΎ
, max-content
, min-content
ΠΈ fit-content
ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½Ρ 0 ΠΏΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ Π½Π° min-height
Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΠΆΠΈΠΌ Π·Π°ΠΏΠΈΡΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ, Ρ.Π΅. ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ-ΡΠ±
).
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 250 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 50%; ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: 100vh; ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ
ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
: Chrome, Firefox, Safari, Opera, Internet Explorer, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π° Android ΠΈ iOS.
ΠΠΎΠ²ΡΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠ΅ Π² CSS3, Π΅ΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½ΠΎΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅:
* ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠ΅ΡΠΈΠΊΡ.
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ:
- ΠΠ°
- ΠΠ΅Ρ
- Π§Π°ΡΡΠΈΡΠ½ΠΎ
- ΠΠΎΠ»ΠΈΡΠΈΠ»Π»
Π‘ΡΠ°ΡΠΈΡΡΠΈΠΊΠ° Ρ caniuse.com
ΠΠ°Π½ΠΊΠ½ΠΎΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Safari Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
CSS 2.1 ΡΠ²Π½ΠΎ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: [[<Π΄Π»ΠΈΠ½Π°> | <ΠΏΡΠΎΡΠ΅Π½Ρ>] && [Π³ΡΠ°Π½ΠΈΡΠ° | content-box]? ] | Π² Π½Π°Π»ΠΈΡΠΈΠΈ | ΠΌΠΈΠ½-ΠΊΠΎΠ½ΡΠ΅Π½Ρ | max-content | ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ | Π½Π΅Ρ ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° Π²ΡΠ΅Π³Π΄Π° Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (Π½Π° Π½ΠΈΡ
Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΠΎΠ»Ρ ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² Π²ΡΠ΅Π³ΠΎ CSS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°: ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
.ΠΊΠΎΡΠΎΠ±ΠΊΠ° {
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
}
.ΠΊΠΎΡΠΎΠ±ΠΊΠ° {
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: 5vh;
}
.ΠΊΠΎΡΠΎΠ±ΠΊΠ° {
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 80%;
}
.ΠΊΠΎΡΠΎΠ±ΠΊΠ° {
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: Π΅ΡΡΡ;
}
.ΠΊΠΎΡΠΎΠ±ΠΊΠ° {
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
}
.ΠΊΠΎΡΠΎΠ±ΠΊΠ° {
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: ΠΌΠ°ΠΊΡ-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
}
.ΠΊΠΎΡΠΎΠ±ΠΊΠ° {
ΠΌΠΈΠ½-Π²ΡΡΠΎΡΠ°: Π½Π΅Ρ;
} Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° height ΠΌΠ΅Π½ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ min-height. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° max-height ΠΈ height. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π»ΠΈΠ½Ρ CSS (px, pt, em ΠΈ Ρ. Π.) ΠΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΡ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ. min-height
Ρ
undefined, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΎ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
CSS ΠΌΠΈΠ½. ΠΡΡΠΎΡΠ°
min-height
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
).ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡ.
ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡ. ΠΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½Π°Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π²Π½ΠΎ Π½ΡΠ»Ρ. Π΅ΡΡΡ Π² Π½Π°Π»ΠΈΡΠΈΠΈ
ΠΌΠ°ΠΊΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
min-content
. Π½Π΅Ρ
).ΠΡΠΎ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ Π΄Π»ΠΈΠ½Ρ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ .
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ
Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
ΡΠ½ΡΡΠΎ
Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ
ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈΠ»ΠΈ Π½Π΅Ρ.ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΎΠ½ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² ΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡΡΡΡΡ, ΠΈΠ»ΠΈ ΠΈΡ
Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΡΡΡΡ. ΠΠ±ΡΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
0
ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°
min-height
: ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
CSS Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ min-height
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡΒΆ
min-height: length | Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° min-height: ΒΆ
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Min-height