CSS: прилепить блок к низу страницы, чтобы он не проваливался в другие блоки

308

big boy

12 февраля 2014, 06:53

1523

Есть родительский див, в котором несколько дочерних.

Назовём условно дочерние: контент и футер.

CSS родительского дива: position:relative; width: 760px; min-height:455px; float: left;

CSS футера, который надо прижать к нижнему краю: position:absolute; bottom:0; width:740px; height:120px;

Вроде работает, но не совсем так, как задумано. Футер внизу, но из-за того, что он position:absolute - в него "проваливается" контент, идущий перед ним. То есть они накладываются друг на друга.

Как можно исправить? Нужно вне зависимости от размера контента прижимать футер к низу и оставлять между ними зазор минимум 10px.

---------- Добавлено 12.02.2014 в 11:07 ----------

Временно решил, добавив к контенту margin-bottom:130px;

✔ Google spam update убил сайты? Что делать - https://webmasta.ru/blog/google-october-2022-spam-brain-update

218

DiAksID

12 февраля 2014, 07:15

#1

это не временное решение - это нормальное решение... но марджин лучше заменить на паддинг... ну и слегка логичнее этот паддинг прилепить не к контенту а к обёрке + указать ей box-sizing: border-box, тогда контент можно набирать из нескольких блоков...

show must go on !!!...

308

big boy

12 февраля 2014, 08:00

#2

DiAksID:
это не временное решение - это нормальное решение... но марджин лучше заменить на паддинг... ну и слегка логичнее этот паддинг прилепить не к контенту а к обёрке + указать ей box-sizing: border-box, тогда контент можно набирать из нескольких блоков...

Паддинг указывал, но из-за того, что блоки у меня черным цветом залиты, получалось, что этот цвет "заезжал" на идущий снизу футер. С марджином такого нет.

Дабы темы не плодить, еще один вопрос появился.

Для родительского термина указана минимальная высота в 455 пикселей:

	width: 760px; 
	min-height:455px; 
	float: left; 
	margin-left: 10px; 
	position:relative;

Однако, в IE футер не прижимается к соседнему блоку, как это задумано, а опускается ниже ровно на 10 пикселей.

На картинке справа - IE, слева - любой другой браузер:

Проблема решается, если в CSS изменить min-height на 445

или

для футера вместо bottom:0; прописать bottom:10;

Но в таком случае в остальных браузерах блок наоборот задирается выше.

Пробовал так же для родителя такое решение:

	width: 760px; 
	min-height:455px; 
	height:auto !important;
	height:445px;
	float: left; 
	margin-left: 10px; 
	position:relative;

Не помогло.

Так же пробовал подключить отдельный стиль для IE через:

<!--[if IE]> <link href= "ie.css" rel= "stylesheet" media= "all" /> <![endif]-->

Не помогло.

Как для IE прописать отдельный min-height?

---------- Добавлено 12.02.2014 в 12:03 ----------

З.ы. IE 11 версии.

---------- Добавлено 12.02.2014 в 12:07 ----------

З.ы.2 В Safari на ios та же фигня.

218

DiAksID

12 февраля 2014, 08:08

#3

дело в том, в старом осле высота блока считается "по особому" не так как w3c задумывалось, а в 8+ box-sizing отработает так как надо.

вас так парит 0.5% лишенцев? количество которых мелкомягкие лихо уменьшают в "приказном" порядке 😎

вообщем нормализация + box-sizing:border-box для всего и с высотой блоков всё будет ок...

308

big boy

12 февраля 2014, 08:58

#4

Добавил к родителю и футеру:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Не помогло.

68

Moneymaker8

13 февраля 2014, 14:22

#5

big boy:
Однако, в IE футер не прижимается к соседнему блоку, как это задумано, а опускается ниже ровно на 10 пикселей.

Проблема решается, если в CSS изменить min-height на 445
или
для футера вместо bottom:0; прописать bottom:10;

Но в таком случае в остальных браузерах блок наоборот задирается выше.

big boy:
Так же пробовал подключить отдельный стиль для IE через:
Код:



Не помогло.

Как так не помогло? Проверяйте ie.css, в main.css то всё решается.

Google: E-E-A-T не является фактором ранжирования

Зачем быть уникальным в мире, где все можно скопировать