3 колонки + высота 100%

Мне нужно то же, что и в http://blog.html.it/layoutgala/LayoutGala19.html но высота каждого столбца должна составлять 100%, а высота всей страницы должна составлять минимум 100%. Кто-нибудь может помочь?

Источник

1 ответ

Решение

Вы, вероятно, должны взглянуть на вопрос: как использовать несколько столбцов, которые занимают 100% высоты, с помощью Twitter-начальной загрузки?

Они упоминают эту ссылку (и вы можете увидеть исходный код здесь), которую, я думаю, вы ищете. Вы должны установить height: 100% за <html> а также <body>и затем контейнер должен иметь min-height: 100%

Источник

Я пытался получить этот макет с помощью CSS-сетки, но, к сожалению, я не думаю, что это возможно. Использование поплавков - это простой способ сделать это.

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

.box {
  height: 100%;
}

.box1 {
  float: left;
  width: 20%;
  background-color: red;

}

.box2 {
  float: left;
  width: 60%;
  background-color: green;

}

.box3 {
  float: left;
  width: 20%;
  background-color: blue;
}
<html>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </body>
</html>

Затем текст можно разместить в каждом столбце именно там, где вы хотите, используя абсолютное / относительное позиционирование.

РЕДАКТИРОВАТЬ: Вы также можете использовать Flexbox, чтобы сделать это довольно легко.

Источник
Другие вопросы по тегам