CSS статическое поле снизу под контентом?

Question

Я пытаюсь получить 50 пикселей в нижней части моей страницы, ниже основной области содержимого, чтобы независимо от того, какой размер текста у пользователя или какой объем содержимого находился внутри страницы - всегда есть оставшиеся 50px пробела за областью содержимого, из-за чего будет отображаться либо div контейнера (прозрачный), либо body.

Звучит довольно просто, и я возился с настройкой полей и отступов для моего контейнера div, тега body и т. Д., Но мне не повезло больше, чем когда-либо. Увеличение размера или содержимого вытесняет любое пространство, которое мне удается создать.

Существует ли общий, чистый подход к созданию этого эффекта?

Answer 1

Трудно сказать, не видя разметки, но может случиться так, что ваш контейнерный элемент div не очищает его дочерние элементы, что может объяснить, почему не работает margin или padding внизу ...

Если вы поместили div внутри контейнера, то это может быть проблемой.

Существует несколько методов очистки поплавков - поиск очищения css float для всех из них - быстрая проверка состояла в том, чтобы бросить div с float: none; clear: both; ниже других детей и посмотрите, если это имеет значение.
Я часто нахожу полезным установить цвет фона на контейнере во время проработки этого материала, а затем убрать его, когда вы все сделаете правильно.

Answer 2

Вы можете создать div следующим образом:

height: 50px;
width: 100%;
position: fixed;
bottom: 0;

Это просто создаст белый ящик высотой 50 пикселей, который никогда не будет двигаться, и он застрянет в нижней части браузера. Это то, что вы пытаетесь достичь?

Если содержимое все еще проходит через этот div, попробуйте изменить его z-index так, чтобы он располагался над другими элементами.