Вы можете использовать абсолютное позиционирование.
top
и bottom
, равными высоте верхнего и нижнего колонтитула соответственно, это растянет контейнер на оставшуюся высоту inline-block
внутри есть 100%
height text-align:center
для родителя, чтобы выровнять дочерний inline-block
до центра HTML
CSS
*{
margin:0;
padding:0;
}
html,body{
height:100%;
text-align:center;
}
#container{
position:absolute;
top:50px; /*height of header*/
width:100%;
bottom:50px; /*height of footer*/
background:white;
text-align:center;
}
#container div{
display:inline-block;
min-width:200px;
height:100%;
background:dodger blue;
}
Или если совместимость с браузером не проблема, вы можете использовать функцию css3 calc()
, как еще один ответ указал
1
задан Brad Reed 16 January 2019 в 17:16
поделиться