Блог

Главная - Вопросы по программированию - Как добавить пробел между div и нижней частью страницы

Как добавить пробел между div и нижней частью страницы

#html #css #css-position

#HTML #CSS #css-позиция

Вопрос:

У меня есть этот разделитель, который выходит за пределы высоты страницы, и белый интервал под разделителем исчезает, как мне добавить белый интервал обратно?

 div {  background-color: grey;  position: relative;  top: 136px; } 
 lt;divgt;  lt;pgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;/pgt; lt;/divgt;

Вот фотография того, как досматривается прослушиваемый div

Комментарии:

1. div { bottom: value; } и добавленное правило переполнения.

2. Эм, спасибо? Это ответ или комментарий? Я думаю, что вы должны ответить вместо комментариев, чтобы получить кредит, если это ответ.

3. нет, потому что это грязный комментарий. Недостаточно для содержательного ответа. Не каждое решение здесь должно быть дано в качестве ответа и оценено по достоинству.

4. О, это также не сработало для меня.

Ответ №1:

Просто используйте margin-top вместо top этого , чтобы это расстояние добавлялось сверху, а div не просто перемещалось на это значение по отношению к его исходному положению в потоке документов (что не увеличивает высоту родительского элемента).

 div {  background-color: grey;  position: relative;  margin-top: 136px; } 
 lt;divgt;  lt;pgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;/pgt; lt;/divgt;

Ответ №2:

Просто добавьте «снизу» и «сверху», чтобы расположить absoulte

 div {  background-color: grey;  position: absoulote;  bottom: 100px; top:100px; } 
 lt;divgt;  lt;pgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;brgt;Lorem Ipsumlt;/pgt; lt;/divgt;

Ответ №3:

Когда вы перемещаете элемент, добавляя top значение, вы делаете именно это — перемещаете его вниз по странице, не обязательно меняя что-либо еще. Итак, если вы возьмете элемент, который был бы расположен с пробелом вокруг, и добавите top значение, вы почти наверняка переместите его вниз, так что теперь он находится над тем пространством, которое там было бы. В этом случае элемент в вашем фрагменте, похоже, был перемещен вниз так далеко, что теперь он находится внизу.

Проблема, с которой я сталкиваюсь, предлагая решение, заключается в том, что я абсолютно не представляю, как ваш вопрос связан со скриншотом, который вы опубликовали. На этом изображении показан div, занимающий всю вертикальную высоту окна, и, похоже top , он вообще не установлен! И, более того, вы показываете #Content свойства во всплывающем окне, когда body элемент выбран на панели инспектора справа.

Итак, в качестве первоначального предложения: добавьте разделительный разделитель в нижней части вашего раздела содержимого, который помещает там белый блок.

 div {  position: relative; }  .content {  background-color: grey;  position: relative;  top: 136px; }  .spacer {  background-color: white;  height: 60px; } 
 lt;div class="content"gt;  lt;pgt;Lorem Ipsum1lt;brgt;Lorem Ipsum2lt;brgt;Lorem Ipsum3lt;brgt;Lorem Ipsum4lt;brgt;Lorem Ipsum5lt;brgt;Lorem Ipsum6lt;brgt;Lorem Ipsum7lt;brgt;Lorem Ipsum8lt;brgt;Lorem Ipsum9lt;brgt;Lorem Ipsum10lt;brgt;Lorem Ipsum11lt;brgt;Lorem Ipsum12lt;brgt;Lorem Ipsum13lt;brgt;Lorem Ipsum14lt;/pgt;  lt;div class="spacer"gt;lt;/divgt; lt;/divgt;

Комментарии:

1. зачем добавлять пробел? ИМХО очень плохое кодирование на всех уровнях. Проще, чем добавить жестко закодированный разделитель, было бы использовать псевдоэлемент: div :last-child::after { content: ""; height: 60px; } . Однако для достижения того же результата просто используйте div { padding-bottom: 60px }

2. Это немного грубо, @tacoshy. Добавление отступов вообще не даст того же результата — это даст больше серой области, а не белой области. Возможно, это не самое элегантное решение, но оно работает. Это был ::after бы хороший способ получить тот же результат.

Метки: