<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

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

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как прижать футер к низу страницы(табличный способ).

Как прижать футер к низу страницы(табличный способ).

Здравствуйте! Сегодня мы рассмотрим, как прижать футер к низу страницы, используя табличный способ.

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

HTML верстка:

<div class="wrapper">
  <div class="header">
   This is the header
  </div>
  <div class="content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore.</p>
  </div>
  <div class="footer">
   This is the footer
  </div>
</div>

И CSS код:

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  display: table;
}

.header, .content, .footer {
  display: table-row;
}

.header, .footer {
  height: 1px;
}

Итак, здесь мы для обертки задаем свойство display, равное table, чтобы данный блок стал вести себя, как таблица, а для блоков header, content и footer задаем значение display, равное table-row, чтобы они стали вести себя, как ряды таблицы. Однако, при таком подходе блоки header и footer будут иметь не свою реальную высоту, а высоту ряда таблицы по умолчанию. Чтобы это исправить, мы задаем для них высоту заведомо меньшую, чем реальная высота этих блоков - 1px.

Итак, вот и все! Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

minima minima 22.10.2015 05:42:45

Легко и просто :) Мне нравится, практично.

Ответить

AChmil AChmil 12.03.2016 01:10:07

У меня не работает... Футер не прижимается к низу страницы, а идёт сразу за содержимым. Заработала только при свойстве класса wrapper не min-height: 100%; а просто height: 100%;

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.