Создание нижнего колонтитула с использованием основы CSS Framework ZURB

Question

Я использую структуру CSS основания ZURB для создания веб-сайта. В настоящее время я пытаюсь создать нижний колонтитул, который останется в нижней части моей страницы. У меня есть следующий код для нижнего колонтитула, но он не подходит ко дну, а скорее появляется в середине.

Не могли бы вы рассказать мне, как создать нижний колонтитул (с использованием основы основания ZURB), который останется внизу?

<div class="row"> 
    <div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div> 
</div> 

Answer 1

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

Использование «шоу на и шкурку на варианты» Zurb в это очень легко сделать. Вы можете использовать любую графику, используемую обеими нижними колонтитулами, чтобы любой «штраф за скачивание» был небольшим.

Чтобы создать липкий нижний колонтитул для вашего сайта, вам нужно добавить CSS в Zurb. (Вы можете добавить это в файл app.css, который является репозиторием Zurb для вашего дополнительного CSS)

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

http://www.cssstickyfooter.com/

Также статья Brad Frost (отправленный Ed Charbeneau) больше читать - я не видел, что раньше.

Answer 2

Что вы пытаетесь сделать, это создать «липкий нижний колонтитул» или «фиксированный нижний колонтитул позиции». Это то, что не зависит от Фонда и вместо этого является функцией CSS в целом.

Я предлагаю прочитать эту статью Брэдом Фростом. Он идентифицирует базовый CSS, участвующий в создании элемента фиксированной позиции, и проблемы совместимости, возникающие в результате этого. http://bradfrostweb.com/blog/mobile/fixed-position/

Answer 3

Простой! Фонд Zurb сам основан на Compass. Таким образом, вы можете использовать Mixing Sticky Footer.

http://compass-style.org/reference/compass/layout/sticky_footer/

Существует пример того, как сделать это здесь: http://compass-style.org/examples/compass/layout/sticky-footer/

Но вы просто идете:

<div class='example'> 
    <div id='layout'> 
    <div id='header'> 
     <h1>Sticky Footer Example</h1> 
    </div> 
    <p> 
     This is the main content area. 
    </p> 
    <p> 
     In this example you should pretend that the red box 
     is actually the browser window. 
    </p> 
    <p> 
     Because, being a contrived example, it's not actually sticking 
     to the bottom of the page. 
    </p> 
    <div id='layout_footer'></div> 
    </div> 
    <div id='footer'> 
    This is the footer area. 
    </div> 
</div> 

А вы SCSS

@import "compass/reset.scss"; 
@import "compass/layout.scss"; 

@include sticky-footer(72px, "#layout", "#layout_footer", "#footer"); 

#header { 
    background: #999999; 
    height: 72px; } 

#footer { 
    background: #cccccc; } 

.example { 
    height: 500px; 
    border: 3px solid red; 
    p { 
    margin: 1em 0.5em; } } 

Answer 4

Check из этого простого липкого нижнего колонтитула для fou ndation, нет необходимости в #wrapper или фиксированной высоте! Работает также на мобильных устройствах. http://tangerineindustries.com/download/sticky_footer/

Answer 5

Для справки, вот как я это сделал, используя Foundation 4.0.

Оценка: <footer> тег.

footer { 
    @include panel($panel-color, $panel-padding); 
    width: 100%; 
    margin: 0; 
    position: fixed; 
    bottom: 0; 
} 

Answer 6

HTML:

<div id="footer"> 
     My Awsome Footer 2014 
</div> 

CSS

#footer{ 
    height: 50px; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
    line-height: 50px; 
    color: #aaa; 
    text-align: center; 
    width: 100%; 
} 

работает скрипку: http://jsfiddle.net/AunmM/

Answer 7

С фундамент 6 Импорт компаса невозможно из коробки. И обходной путь трудно найти.

Хорошее решение вместе с фундаментом может быть этот маленький помощник: http://tangerineindustries.com/download/sticky_footer/

Pro:

1. Разработчик создал это для использования совместно с ZF 6.
2. Вам нужно всего лишь <footer> тег ,
3. Работает с гибкой гибкой высотой нижнего колонтитула, даже с Изменение размера окна.
4. Вам не нужны никакие дополнительные #wrapper, #pusher, #footer html-элементы.
5. Вам не нужен дополнительный CSS.

Contra:

1. использует JavaScript.