min-height¶
Свойство min-height задаёт минимальную высоту элемента.
Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height , max-height и min-height .
Если значение высоты ( height ) меньше значения min-height , то высота элемента принимается равной min-height .
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* value */ min-height: 3.5em; /* 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.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
html> head> meta charset="utf-8" /> title>min-heighttitle> 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>Сайт Cloverfieldp> p> a href="page/techinfo.html">Информация о сайтеa> a href="page/activity.html">Об автореa> p> footer> body> html> CSS height not working if body has min-height
This does not resize the wrapper to the height of the window. When I remove the min- and use height , it’ll work. But I have to have the content height variable. I did find some other posts here on SO and on google, but they have just questions and no solution.
3 Answers 3
When you use a percentage value for height , it will always be relative to the specified height of the parent element. Not the actual height of the parent element, but the height specified in CSS.
So when your body element has no height specified (only min-height , but that does not count), the 100% will not be able to take effect.
One possible solution is to use position: absolute; top: 0; bottom: 0; on your #wrapper , and your div will be stretched. This of course might have some layout consequences that you do not want.
I already feared that fact 🙁 I’m trying to have my #wrapper going to bottom under every circumstances. So if the content is smaller, it has to be 100% of the html, otherwise it has to be as high as the content. And that does not work with position:absolute . Sad it seems to be unachievable. But many thanks. Any other ideas are still appreciated 😉
@Julian Well, if you put overflow: auto on your absolute positioned wrapper it will certainly look fine. I don’t know exactly what are the special requirements though. But hm. don’t you want min-height on your #wrapper element instead of body if I get it right?
Short Answer
Use height:100vh; for divs you want to stretch and fill the screen.
Do not set body’s height: 100%; It will break your entire site if you have pages that have more than 100% in content height. They won’t be able to scroll.
Long Answer
If you want a few pages of your website to fill the entire screen while still allowing other pages to scroll (because they have more than 100% height in content), you need to set the div height to 100%, not the entire site-wide body height.
Use this as general site-wide css:
Then set specific divs to fill the entire screen (when they have less than 100% height in content):
/* Set any div heights to 100% of the screen height*/ .div
100% Min Height CSS layout
In particular if you have a layout with a header and footer of fixed height , how do you make the middle content part fill 100% of the space in between with the footer fixed to the bottom ?
You could consider min-height: 100vh; . This sets the height equal or greater to the size of the screen, vh: vertical height . For more : w3schools.com/cssref/css_units.asp.
Just as a clarification, vh stands for viewport height and so you can also use vw for viewport width and vmin for whichever dimension is the smallest, viewport minimum .
This solution will give unwanted results on chrome for Android (would have to check on other mobile browsers like Safari) because 100vh will not be the same as 100%. In fact, height 100% corresponds to height of the screen minus the address bar at top of screen, while 100vh corresponds to height of the screen without the address bar. So using 100vh will not work on chrome for Android. Your footer will be below the fold by a height matching the height of the address bar of the browser.
14 Answers 14
I am using the following one: CSS Layout — 100 % height
Min-height
The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don’t need (or want) the physical elements to create such a visual effect. If you’re not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
Relative positioning
Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
Padding-bottom
Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
Scale the text size a bit or resize your browser window to test this layout.
html,body < margin:0; padding:0; height:100%; /* needed for container min-height */ background:gray; font-family:arial,sans-serif; font-size:small; color:#666; >h1 < font:1.5em georgia,serif; margin:0.5em 0; >h2 < font:1.25em georgia,serif; margin:0 0 0.5em; >h1, h2, a < color:orange; >p < line-height:1.5; margin:0 0 1em; >div#container < position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:750px; background:#f0f0f0; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ >div#header < padding:1em; background:#ddd url("../csslayout.gif") 98% 10px no-repeat; border-bottom:6px double gray; >div#header p < font-style:italic; font-size:1.1em; margin:0; >div#content < padding:1em 1em 5em; /* bottom padding for footer */ >div#content p < text-align:justify; padding:0 1em; >div#footer < position:absolute; width:100%; bottom:0; /* stick to bottom */ background:#ddd; border-top:6px double gray; >div#footer p To set a custom height locked to somewhere:
body, html < height: 100%; >#outerbox < width: 100%; position: absolute; /* to place it somewhere on the screen */ top: 130px; /* free space at top */ bottom: 0; /* makes it lock to the bottom */ >#innerbox < width: 100%; position: absolute; min-height: 100% !important; /* browser fill */ height: auto; /*content fill */ >Here is another solution based on vh , or viewpoint height , for details visit CSS units. It is based on this solution, which uses flex instead.
This is the content. Resize the viewport vertically to see how the footer behaves.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
The units are vw , vh, vmax, vmin. Basically, each unit is equal to 1% of viewport size. So, as the viewport changes, the browser computes that value and adjusts accordingly.
You may find more information here:
1vw (viewport width) = 1% of viewport width 1vh (viewport height) = 1% of viewport height 1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest 1vmax (viewport minimum) = 1vw or 1vh, whatever is largest