Прижатие футера к низу

[iKNG]

В общем, впервые столкнулся с данным требованием. Вообще оно типичное, но я на нем споткнулся. Просто здесь немного другая ситуация, поэтому Google не помог. Дело вот в чем.

Есть фиксированной высоты header. Допустим, 100 пикселей. И div, в котором контент. При том самого футера нету, только контент и шапка. Надо при недостаточном кол-ве контента (т. е. когда он не занимает высоту больше размера экрана) средствами CSS растянуть блок контента на всю оставшуюся высоту, с учетом шапки, чтобы ей хватило места, но при том без calc.

То есть типичное прижатие футера к низу, но вместо футера - низ основного блока.

Edited February 2, 2014 by iKNG

[js5]

box-flex в помощь.

[Sensei]

Так сойдет? http://jsfiddle.net/2ydUW/

[bvvell]

http://jsfiddle.net/bvvell/2ydUW/1/ Можно еще так, но это почти то же самое, как на примере выше

[iKNG]

А возможно это сделать без таблиц и CSS3? Как-нибудь модифицировать этот способ? Просто мне они нужны разной ширины и при том без добавления других блоков.

[Sensei]

Тогда используйте JS, я другого варианта не вижу.

[mrnobody]

А если вот так: я задал шапке абсолютное позиционирование, задал для контента паддинг топ в высоту шапки и поствил ему box-sizing: border-box;

http://jsfiddle.net/mrnobody/TceXE/3/

Фулл-скрин: http://fiddle.jshell.net/mrnobody/TceXE/3/show/

Edited February 3, 2014 by mrnobody

[iKNG]

А если вот так: я задал шапке абсолютное позиционирование, задал для контента паддинг топ в высоту шапки и поствил ему box-sizing: border-box;

http://jsfiddle.net/mrnobody/TceXE/3/

Фулл-скрин: http://fiddle.jshell.net/mrnobody/TceXE/3/show/

Тот же самый баг: появляется скролл, то есть больше высоты экрана.

[Sensei]

А я проморгал про фиксированную высоту header

 

 

 

появляется скролл

Если в firefox смотрите, там box-sizing нужно с префиксом писать, т.е. -moz-box-sizing: border-box;

Edited February 3, 2014 by Sensei

[mrnobody]

Да блин, забыл префиксы дописать, еммет разбалывал )

С префиксами:

http://jsfiddle.net/mrnobody/TceXE/4/

Фуллскирн — http://fiddle.jshell.net/mrnobody/TceXE/4/show/

Edited February 3, 2014 by mrnobody