2015-02-13 6 views
2

Пока я прибивал простыню размером 50 пикселей ниже моего тела, у меня все еще возникают проблемы с кучей белого пространства, сидящего ниже моего нижнего колонтитула на моих страницах. Должен ли я просто увеличить свой контент до заполнения вертикального пространства? Я впервые использую bootstrap для создания моего нового сайта, и я остаюсь с этой досадной дилеммой. вот ссылка на страницу нарушившей:Белое пространство ниже нижнего колонтитула на моих загрузочных страницах

http://preview.yourgreatwebsite.com/ecom.php

Я держал пари, кто-то будет смотреть на это и показать мне что-то я не вижу в Firebug (или за Firebug). Я слишком долго смотрел на нее!

+5

Пожалуйста, добавьте содержательный код и описание проблемы. Не связывайте с сайтом, который нуждается в исправлении. В противном случае этот вопрос потеряет любое значение будущим посетителям, как только проблема будет решена. Публикация [Краткосрочный, самосохраненный, правильный пример (SSCCE)] (http://www.sscce.org/) , который демонстрирует вашу проблему, поможет вам получить более качественные ответы. Для получения дополнительной информации см. [Что-то на моем веб-сайте не работает. Могу ли я просто вставить ссылку на ?] (Http://meta.stackexchange.com/questions/125997/) Спасибо! – j08691

+0

* Нужно ли просто заполнять мой контент длиннее, чтобы заполнить вертикальное пространство? * - Да; поведение, которое вы описываете, не является дефолтом. Или используйте метод [липкий нижний колонтитул.] (Http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web- страница) – George

+0

Что сказал Джордж, плюс вот [Шаблон загрузочного шаблона Bootstraps] (http://getbootstrap.com/examples/sticky-footer/) – Ted

ответ

0

Добавьте нижний отступы (точно высоту футера) на родительском элемент нижнего колонтитула, который находится в вашем случае body:

body{ 
    .... 
    padding-bottom:70px;// You can adjust it 
} 

и сделать положение футера в absolute

.footer-main { 
    background: #81ccfb; 
    padding: 1em; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
0

Вы могли бы используйте flexbox для исправления макета.

Css

body{ 
    display:flex; 
    flex-direction: column; 
} 
.navbar { 
    order:1; 
    flex-shrink:1; 
} 
.headerstrip { 
    order:2; 
    flex-shrink:1; 
} 
.container { 
    order:3; 
    flex-grow: 5; 
} 
.footer-main { 
    order: 4; 
    flex-shrink: 1; 
} 
-1

Просто добавьте в ваш footer класса (в вашем случае: .footer-main):

position: absolute; 
bottom: 0; 

Краткое объяснение: он установит футер как плавающий блок, который Безразлично положение 't зависит от других элементов, а затем он будет прикреплять нижний колонтитул к нижней части страницы.

+0

Теперь я чувствую себя немым ... конечно .... !! и шириной 100%, и это делает. –

+0

Да, конечно ширина должна быть 100%, и, возможно, использовать отступы, чтобы сделать ее более приятной :) –

+0

Это не работает на более длинных страницах ... Посмотрите http://preview.yourgreatwebsite.com/portfolio. php –

0

Просто удалите Bootstrap отступы по умолчанию в нижней части страницы:

body 
{ 
    padding-bottom:0; 
} 
0

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

.footer p { // Selects text inside a <p> tag that is inside a .footer <div> 
    margin-bottom: 0; // removes default <p> tag margin from the bottom 
} 
Смежные вопросы