CSS static margin-bottom под содержимым?

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

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

Есть ли общий чистый подход к созданию этого эффекта?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
2 854
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете создать такой div:

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

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

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

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

Jon 16.12.2008 03:47
Ответ принят как подходящий

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

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

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

Вы были на высоте - я не очистил плавающие элементы внутри должным образом. После этого поля стали вести себя так, как я ожидал. Спасибо! знак равно

Jon 16.12.2008 04:22

Другие вопросы по теме