Воскресенье, 24 Май 2015 00:00

CSS Height: 100% – не работает

Работая над очередным сайтом, столкнулся с проблемой вёрстки. Причём, как мне казалось «идеальное решение» вёрстки на деле оказалось пылью в глаза. На самом деле, всё в действительности должно было работать так, как задумал. Но на деле работало только в браузере Chrome, остальные (речь идёт не только про Internet Explorer, разработчики которого похоже разрабатывают браузер для жителей параллельного пространства) не желали воспринимать настройки из файла css.

Причём воспринимать не хотели всего одну строку «height: 100%;». Идея заключается в том, что есть таблица, такого вида:

CSS Height: 100% – не работает

И здесь в наличии 9 ячеек, точнее по факту ячеек всего 7. Есть крайние 4 с фиксированным размером, одна ячейка с контентом и 2 ячейки с плавающей высотой (height:100%), однако вместо пустых ячеек залитых нужным мне фоновым изображением, я получил квадрат, нет, не чёрный, как у Малевича, а пустой отрезок на этом промежутке.

Сколько я про height не читал, что только не пробовал сделать, мне ничего не помогло. Писали, что в некоторых случаях в начале подключённого css, способна спасти ситуацию такая строка:

html, body {height:100%;}

Мне не помогло даже это, и прочим «родительским» элементам я задавал высоту – не спасло.

Пришлось строить другую схему. Вместо 3х плавающих объединённых ячеек, я сделал 2. Опять же структура с табличной структуры перешла в блочную структуру. И вместо потенциальных 7-9 ячеек, получилось 4 фоновых блока и один блок контента:

CSS Height: 100% – не работает

Здесь ещё стоит обратить внимание на то, что внутри блока контента «лежит» блок дизайна.

В целом «проиграл» ситуации я только в одном (если не считать, потерянное время), контент не переходит в нижний блок, но это не самое страшное, я так думаю.

Если же нужна именно «табличная» структура, то придётся фиксировать высоту в пикселях, а не в процентах.

Спонсоры: