CSS-пробел внизу страницы, несмотря на наличие как минимальной высоты, так и высоты

Ответ 1

Проблема заключается в том, как вычисляется высота 100%. Два способа справиться с этим.

Добавьте 20px к нижней части тела

body {
    padding-bottom: 20px;
}

или добавить прозрачную рамку к телу

body {
    border: 1px solid transparent;
}

Оба работали для меня в firebug

В защиту этого ответа

Ниже приведены некоторые комментарии относительно правильности моего ответа на этот вопрос. Подобные обсуждения - именно то, почему stackoverflow настолько велик. У многих разных людей разные мнения о том, как лучше всего решить проблему. Я изучил невероятный стиль кодирования, о котором я бы не подумал сам. И мне сказали, что читатели время от времени узнали что-то из моего стиля. Социальное кодирование действительно побудило меня стать лучшим программистом.

Социальное кодирование может время от времени беспокоить. Я ненавижу это, когда я трачу 30 минут на то, чтобы дать ответ с jsfiddle и подробное объяснение только для того, чтобы отправить и найти 10 других ответов, говорящих одно и то же менее подробно. И автор соглашается с кем-то другим. Как расстраивает! Я думаю, что это случилось с моими коллегами-участниками, в частности с тридцатью.

Ответ на тридцать три полностью закончен. p вокруг script является виновником этой проблемы. Удалите его, и пространство исчезнет. Это также хороший ответ на этот вопрос.

Но почему? Разве не должна быть рассчитана высота тега p, отступы и маржа в высоту тела?

И это! Если вы снимете стиль нижнего слоя, который я предложил, а затем установите фон тела на черный, вы увидите, что высота тела включает в себя это дополнительное пространство p точно (вы видите, что полоса внизу поворачивается на черный). Но градиент не может включить его, когда вы находите, с чего начать. Это настоящая проблема.

Два решения, которые я предложил, - это способы сказать браузеру правильно рассчитать градиент. Фактически, дно прокладки может быть только 1px. Значение не важно, но это значение. Это заставляет браузер смотреть, где заканчивается тело. Установка границы будет иметь тот же эффект.

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

Теперь, если бы я строил эту страницу. Я бы избегал обертывания script в теге p. Но я должен предположить, что автор страницы либо не может ее изменить, либо имеет вескую причину для ее размещения. Я не знаю, что делает этот script. Будет ли он писать что-то, что требует тег p? Опять же, я бы избегал этой практики, и это нормально, чтобы подвергнуть сомнению ее присутствие, но также я принимаю, что бывают случаи, когда они должны быть там.

Моя надежда в написании этой "защиты" заключается в том, что люди, которые отметили этот ответ, могли бы рассмотреть это решение. Мой ответ продуман, целеустремлен и уместен. Так думал автор. Однако в этой социальной среде я уважаю то, что вы не согласны и имеете право отрицать мой ответ. Я просто надеюсь, что ваш выбор мотивирован несогласием с моим ответом, а не тем, что автор выбрал мой по вашему.

Ответ 2

Я считаю весьма примечательным, что из 6 ответов никто из них не упомянул о реальном источнике проблемы.

Свертывание полей на последнем p внутри #fw-footer - это место, из которого происходит дополнительное пространство.

Разумным решением было бы добавить overflow: hidden в #fw-footer (или просто добавить margin: 0 в последний p).

Вы также можете просто переместить script внутри этого последнего p вне p, а затем полностью удалить p; нет необходимости обертывать script в p. Первый p (#fw-foottext) имеет margin: 0, поэтому проблема не будет с этим.

Как в сторону, вы нарушили исправление, которое я дал вам в этом вопросе:

Градиент CSS3 с нежелательным белым пространством внизу

Вам нужны html { height: 100% } и body { min-height: 100% }.

В настоящий момент применяется html { height: auto }, что не работает:

(Это происходит с более высоким окном, чем содержимое на странице)

Ответ 3

У меня было пустое место внизу всех моих сайтов; вот как я решил вопрос:

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

* {border: 1px сплошной красный; }

эта строка css помещает красную рамку вокруг всех ваших элементов css.

У меня было пустое место внизу моей страницы из-за неисправного расширения chrome, которое добавляло div dp_swf_engine к нижней части моей страницы:

без красного ящика, я бы никогда не заметил 1px div. Затем я избавился от неисправного расширения и поместил 'display: none' на #dp_swf_engine в качестве вторичной меры. (кто знает, когда он может вернуться, чтобы добавить случайное пустое пространство внизу моей страницы для всех моих страниц и приложений?!)

Ответ 4

Проблема заключается в фоновом изображении элемента html. Кажется, вы установили его в значение "null", которое недопустимо. Попробуйте полностью удалить это правило CSS или, по крайней мере, установить background-image:none

EDIT: файл CSS говорит, что он "сгенерирован", поэтому я не знаю точно, что вы сможете редактировать. Проблема заключается в этой строке:

html { background-color:null !important; background-position:null !important; background-repeat:repeat !important; background-image:url('http://images.freewebs.com/Images/null.gif') !important; }

Я предполагаю, что вы поместили null в качестве значения, и он установил фон в GIF с именем "null".

Ответ 5

Это приведет к удалению поля и отступов из ваших элементов страницы, поскольку в нем есть абзац с script, который вызывает добавленную маржу. таким образом, вы должны reset его, а затем вы можете стилизовать другие элементы вашей страницы, или вы могли бы дать этому абзацу идентификатор и установить маркер в ноль только для него.

<style>
* {
   margin: 0;
   padding: 0;
}
</style>

Попробуйте поставить это как первый стиль.

Ответ 6

В нижнем колонтитуле есть второй абзац, содержащий script. Именно это вызывает проблему.

Ответ 7

Это происходит из-за:

<p><script>var _nwls=[];if(window.jQuery&&window.jQuery.find){_nwls=jQuery.find(".fw_link_newWindow");}else{if(document.getElementsByClassName){_nwls=document.getElementsByClassName("fw_link_newWindow");}else{if(document.querySelectorAll){_nwls=document.querySelectorAll(".fw_link_newWindow");}else{document.write('<scr'+'ipt src="http://static.websimages.com/static/global/js/sizzle/sizzle.min.js"><\/scr'+'ipt>');if(window.Sizzle){_nwls=Sizzle(".fw_link_newWindow");}}}}var numlinks=_nwls.length;for(var i=0;i<numlinks;i++){_nwls[i].target="_blank";}</script></p>

Удалите <p></p> вокруг script.

Ответ 8

(class/ID):after {
content:none;
}

Всегда работает для меня класс или идентификатор могут быть для тела div или даже тела, вызывающего пробел.