Зазор внизу страницы

Я почти закончил разработку оформления для своих форумов, и почти с самого начала у меня образовался пробел внизу страницы, под нижним колонтитулом. Я нашел ряд похожих вопросов и перепробовал все предложения, но не могу найти причину пробела в нижней части моей веб-страницы форума.

Форум : Ссылка на форум

Я проверил все свои поля и отступы, и все в порядке, и проблема появляется во всех браузерах.


html css vbulletin
person Adam    schedule 21.02.2012    source источник
comment
Вместо фиксированного padding-top задайте для нижнего колонтитула фиксированную height - например, установив здесь высоту 150 пикселей, отсортированные вещи.   -  person Shadow Wizard Wearing Mask V2    schedule 21.02.2012

Ответы (3)


arrow_upward
2
arrow_downward

Установите свой

    body {overflow:hidden}
person bassplayer7    schedule 21.02.2012
comment
Это действительно плохой хак. Он удаляет оба ползунка, горизонтальный и вертикальный. Тогда вы получите мертвую страницу. Адаму пришлось бы исправить свой HTML/CSS, чтобы избежать пробелов... - person Alexis Wilke; 26.03.2017
comment
Я часто обнаруживал, что это необходимо на каждой странице всего сайта, если этот сайт использует Bootstrap. Но, как указал @AlexisWilke, это означает, что страницы с содержимым, не умещающимся по высоте браузера, не могут быть прокручены. Раньше я пытался обойти это, но, наконец, хотел бы знать, почему это часто необходимо с Bootstrap, и какая была бы лучшая альтернатива (если она существует). P.S. Я точно знаю, что проблема (по крайней мере, в моем случае) почти никогда не связана с посторонними отступами/полями. - person Kenny83; 21.11.2018

arrow_upward
3
arrow_downward

Разрыв вызван полями в вашем div body-wrapper.

margin: -85px auto -60px auto виновником является "-60px" (нижнее поле). Уменьшите или увеличьте его, чтобы изменить разрыв.

введите здесь описание изображения

Текущий:

.body_wrapper {
padding: 0px;
background: transparent none   ;
/*-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;*/
width: 960px;
margin: -85px auto -60px auto;
}

Уменьшенный разрыв:

.body_wrapper {
padding: 0px;
background: transparent none   ;
/*-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;*/
width: 960px;
margin: -85px auto -134px auto;    // CHANGE IS HERE
}

Видеть? Меньше зазора :) (нижнее поле: -134px)

person Alex    schedule 21.02.2012

arrow_upward
2
arrow_downward

Попробуйте использовать Google Chrome Inspector или Firebug для Firefox.

это простая проблема CSS, вы щелкаете правой кнопкой мыши ПРОВЕРИТЬ ЭЛЕМЕНТ, и он покажет вам все атрибуты CSS этого элемента.

О Chrome Inspector (пример)
http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-инспектор/

введите здесь описание изображения

ОБНОВЛЕНИЕ

Похоже, проблема заключается в отступах для меня в нижнем колонтитуле:

.footer {
    background: url("images/simplexity/backgrounds/background.png") repeat scroll 0 0 #33559B;
    border: 0 none;
    clear: both;
    display: block;
    font: 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
    margin-top: -80px;
    padding: 115px 0 3px;
}
person Jakub    schedule 21.02.2012
comment
Я пробовал это, но кажется, что это вызвано чем-то другим, потому что, когда я его проверяю, он показывает, что нет отступов или полей за пределами фонового изображения в нижнем колонтитуле. - person Adam; 21.02.2012
comment
обновил его ответом, его нижний колонтитул, просто щелкните правой кнопкой мыши проверить - person Jakub; 21.02.2012