<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

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

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

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

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

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

Как сделать div со 100% height

Как сделать div со 100% height

При блочной вёрстке часто требуется сделать у блока div высоту 100%. Простым указанием height=100% в div не получится добиться желаемого результата, поэтому тут есть определённая методика, о которой я в этой статье расскажу.

Прежде чем приводить код, объясню принцип его работы. Его суть состоит в том, чтобы указывать height=100% у всех родительских блоков, в том числе, и у html. Например, вот этот код позволяет сделать div с высотой 100%:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV со 100% height</title>
<style type="text/css">
  html, body {
    height: 100%;
  }
  div {
    height:100%;
    background-color: #f00;
  }
  div div {
    background-color: #0f0;
    width: 50px;
  }
</style>
</head>
<body>
  <div>
    <div>Текст</div>
  </div>
</body>
</html>

В результате, оба div будут высотой 100%. Обратите внимание, что если убрать у html height 100%, то уже ничего не выйдет. Аналогично, если у верхнего div убрать height 100%, а у внутреннего оставить, то внутренний не будет со 100% высотой. То есть помните, чтобы сделать div со 100% height необходимо каждый родительский блок так же сделать со 100% высотой.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

ilyadenisovid ilyadenisovid 03.05.2013 20:37:02

Михаил, сделал как у Вас, но при удлинении блока center, правый блок не увеличивается <div id = "content"><div id = "center"></div><div id = "right"></div></div> html, body { height: 100%; } div#content { height: 100%; width: 100%; } div#center { float: left; width: 60%; height: 100%; } div#right { float: right; height: 100%; width: 40%; }

Ответить

Admin Admin 03.05.2013 20:59:48

Это вопрос не относится к данной статье. Чтобы сделать блоки одинаковой высоты, нужно задать для верхнего блока display: table;, а для внутреннего display: table-cell;

Ответить

ilyadenisovid ilyadenisovid 03.05.2013 21:37:01

Мне нужно, чтобы два внутренних юлока бы ли равны

Ответить

Admin Admin 04.05.2013 11:27:45

Читайте мой предыдущий комментарий для этого.

Ответить

Дмитрий184 Дмитрий184 03.05.2013 21:55:51

Махаил! Попробовал предложенный метод - он работает, но с оговоркой, что блоки div, к которым задается высота 100% не должны быть вышиной больше окна браузера. Если блок не умещается по высоте в окне браузера, то блок не полностью окрасится фоновым цветом. Окрасится фоновым цветом только та часть блока, которая умещается в окне браузера. Вот код для примера. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>DIV со 100% height</title> <style type="text/css"> html { height: 100%; } body { height: 100%; } div { height:100%; background-color: #f00; } div div { background-color: #0f0; width: 50px; } </style> </head> <body> <div> <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div> </div> </body> </html>

Ответить

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