100% минимальная высота CSS макет

Question

Каков наилучший способ создать элемент с минимальной высотой 100% в широком диапазоне браузеров? В частности, если у вас есть макет с верхним и нижним колонтитулами фиксированной высоты, как сделать так, чтобы средняя часть содержимого заполняла 100% пространства между ними, а нижний колонтитул был зафиксирован в нижней части?

Answer 1

Вы можете попробовать это: http://www.monkey -business.biz / 88 / horizontal-zentriertes-100-hohe-css-layout / Это 100% высота и горизонтальный центр.

Answer 2

Как упоминалось в ответе Афшина Мехрабани, вы должны установить body и высоту html на 100%, но чтобы получить нижний колонтитул, рассчитайте высоту оболочки:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}

Answer 3

просто поделитесь тем, что я использовал, и прекрасно работает

#content{
        height: auto;
        min-height:350px;
}