Solution on flexbox .
More versatile in terms of maintainability, since it does not require the specification of a fixed height and hacks with position: absolute . If you also need to support IE 10/11, then the solution including their support is located in the "Flexbox for Internet Explorer 10/11" section.
The case of content for the rest of the height:
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; } .content { /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
If you need to be indented from the content, but the content does not occupy the full height, then use margin-top: auto for footer :
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; } .content { border: 1px dotted red; } footer { /* Опустить в самый низ */ margin-top: auto; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
Flexbox for Internet Explorer 10/11
In order for the methods described above to work in IE 10/11, you need to remember the following browser bugs:
min-height does not apply to an element with display: flex and flex-direction: column in IE 10-11. Use height where possible.
Chrome, Opera, and Safari do not take into account the minimum size of the content of direct children of the container c display: flex . Set flex-shrink to 0 (instead of defaults to 1 ) to avoid unwanted "compression".
The case of content for the rest of the height:
body { height: 100vh; margin: 0; display: flex; flex-direction: column; } header, footer { flex-shrink: 0; } .content { /* Занять всё оставшееся пространство */ flex-grow: 1; border: 1px dotted red; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
If you need to be indented from the content:
body { height: 100vh; margin: 0; display: flex; flex-direction: column; } header, footer { flex-shrink: 0; } .content { border: 1px dotted red; } footer { /* Опустить в самый низ */ margin-top: auto; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
CSS grid layout
The case of content for the rest of the height:
body { height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; } .content { border: 1px dotted red; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
If you need to be indented from the content, but the content does not occupy the full height, then use align-self: start for footer :
body { min-height: 100vh; margin: 0; display: grid; /* задаём высоту строк */ grid-template-rows: auto 1fr auto; } .content { /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ align-self: start; border: 1px dotted red; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
CSS Grid Layout for Internet Explorer 10/11
Internet Explorer 10/11 features an outdated version of the CSS Grid Layout module. From a practical point of view, this means that the implementation of this module is very different from other browsers that support this module.
The most important thing to keep in mind is that in IE, the elements are not arranged by default in free cells in order, but simply placed on top of each other in the very first cell. That is, in other browsers, the default values are grid-row : auto and grid-column: auto , whereas in IE, -ms-grid-row : 1 and -ms-column: 1 , so if the line number or column number of the element does not match 1 , then you have to prescribe them differently.
The rest is more trivial. Some properties are not supported (like grid-areas , grid-gap , etc.), some are named differently or different syntax is required and may have excellent defaults.
The case of content for the rest of the height:
body { height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; } .content { /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; border: 1px dotted red; } footer { /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
If you need to be indented from the content, but the content does not occupy the full height, then use align-self: start and -ms-grid-row-align: start for footer :
body { height: 100vh; margin: 0; display: -ms-grid; display: grid; /* по умолчанию в IE размер ячеек равен содержимому, */ /* тогда как в других браузерах размер ячеек растягивается */ /* под свобоодное пространство grid-контейера */ -ms-grid-columns: 100%; /* задаём высоту строк, разные имена свойств */ -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto; } .content { /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 2; /* кладём элемент в начало ячейки по вертикали */ /* чтобы его высота была равна высоте контента */ -ms-grid-row-align: start; align-self: start; border: 1px dotted red; } footer { /* явно прописываем номер строки, когда она не равна 1 */ -ms-grid-row: 3; } .content { -ms-grid-row: 2; border: 1px dotted red; } footer { -ms-grid-row: 3; }
<header> header </header> <div class="content"> content </div> <footer> footer </footer>
