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

Ответ 1

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

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

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

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

http://www.cssstickyfooter.com/

Также статья Брэда Мороза (размещенная Эд Чарбено) - отличное чтение - я этого раньше не видел.

Ответ 2

Simple! Фонд Zurb сам основан на Compass. Таким образом, вы можете использовать смесь "Компас липкий нижний колонтитул".

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 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; } }

Ответ 3

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/

Ответ 4

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

Ответ 5

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

С учетом тега <footer>.

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

Ответ 6

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

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

Pro:

• Разработчик создал это для использования вместе с ZF 6.
• Тебе нужен только тег <footer>.
• Работает с гибкой гибкой высотой нижнего колонтитула, даже с изменение размера окна.
• Вам не нужны никакие дополнительные #wrapper, #pusher, #footer HTML-элементы.
• Вам не нужен дополнительный CSS.

Contra:

• Использует JavaScript.

Ответ 7

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

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