Задачка про страницу в три столбца, один из них в сто пикселей

[ErisNuts]

• исправила height:100% на height:100vh, вы правы, так аккуратнее.
• не спорю, привязываться к структуре документа была не самая лучшая идея, но она обусловлена, постановкой задачи — разбиение столбцов на первый и все остальные, а главное, появилась возможность воспользоваться маппингом.
• на счет flex: 1 1 auto — да, я не учла вариант с вложенными элементами, правильнее будет flex: 1 1 50%, либо указывать max-width: 50%.
• адаптивность и вообще работа с мобильниками идет как дополнительное задание на защите лабораторной, эту часть я намеренно пока опустила, позже планирую дополнить.

[GreatRash]

codepen.io/anon/pen/BmywMx
Задача оторвана от жизни, поэтому вот.

[ErisNuts]

[ErisNuts]

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

[YNile]

Предположу, что задачей.
Какая задача, такое и решение — простое и понятное. Ничего лишнего.
Про наполнение и переполнение блоков в задаче ни слова.

[ErisNuts]

Обычно абсолютное позиционирование используется, если никакие другие методы не работают. Например, при размещении иконок внутри контейнера.
Элемент с таким типом позиционирования не зависит от других элементов и не влияет на другие элементы. Это следует учитывать каждый раз, когда используется абсолютное позиционирование. Его чрезмерное или неправильное использование могут ограничить гибкость сайта.
А самое главное, цель обучения — не научиться решать «оторванные от жизни» задачи, а постепенно погружаться в мир предмета, впитывая знания о правилах, требованиях, ограничениях. Иначе, мне пришлось бы принимать абсолютно любые рабочие варианты.

[GreatRash]

Мало ли, что там обычно используется. Мне дали абсолютно оторванную от реальности задачу, я привёл абсолютно оторванное от реальности решение, которое ещё и работает везде, начиная аж с ИЕ7.

[vdv73rus]

А где CSS-grids? 2017-й на дворе

[ErisNuts]

добавила вариант с грид раскладкой .)

[nebsehemvi]

Иногда самое хорошее решение — простое.

Выкинуть из первого варианта флексы, правильно оформить код и всё будет хорошо. Еще бы от calc избавиться, так вообще прелесть будет — на CSS2 взлетит.
codepen.io/NebSehemvi/pen/pdvwQg

И почему автор использует vw? Если не ошибаюсь, то при использовании vw может появиться горизонтальная полоса прокрутки.

[dimpa91]

Можно и от calc избавиться: jsfiddle.net/8y2mu14w/1

[ErisNuts]

добавила этот вариант в статью, он достаточно интересный.
с указанием на ваше авторство, с небольшими правками.
а вам на практике приходилось отказываться от функции calc?

[dimpa91]

Да, чаще всего с отрицательным margin это решается

[ErisNuts]

задачка учебная, поэтому цель не просто получить решение, а чему-то научиться…
да, может появиться скроллбар, потому что размер вьюпорта больше, чем ширина элемента html.
если дополнить код таким образом:

html, body, .blocks {
  width: 100%;
}

можно использовать 50% вместо 50vw.

[ErisNuts]

спасибо за интересный вариант решения задачки, добавила его в статью с сылкой на ваше авторство, но с небольшими правками.)

[SmithZx]

Ещё до прочтения вариантов пришло в голову очевидное решение, не представленное в статье:
codepen.io/anon/pen/pdvWNZ

Скрытый текст

<div class="root">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.root {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 100px 1fr 1fr;
}
.red {
  grid-column: 1;
  background-color: red;
}
.green {
  grid-column: 2;
  background-color: green;
}
.blue {
  grid-column: 3;
  background-color: blue;
}

[MeylisDay]

Я тоже не очень понимаю, почему гриды не упомянуты в статье.

[ErisNuts]

исправилась .)

[ErisNuts]

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

[Ukrop1975]

Кто мешает для DIV-ов использовать table-cell?
codepen.io/Ukrop1975/pen/dZPmvV

[ErisNuts]

Ничего.) хороший вариант, имеет свои плюсы. добавила его с ссылкой на ваше авторство с небольшими правками.)

[alix_ginger]

Итак, здесь мы имеем несколько антипаттернов: незначащие имена классов

И предлагаете red, green & blue вместо one, two & three? Эти имена точно так же описывают представление, а не семантику, что не совсем правильно.

[ErisNuts]

В таких вопросах я всегда аппелирую к стоимости поддержки кода. Допустим поставили задачу добавить еще одну полосу. И вот нужно переименовать все блоки, исправить стили, короче, куча работы.
А идея с классами — названиями цветов используется в CSS-фреймворках: в Semantic UI, например:
офомление кнопок
И еще, что мне кажется важным, по коду же и так видно, что блок первый, или второй, дублирование информации получается.

[alix_ginger]

А если понадобиться изменить цвета блоков, придется править HTML, чтобы изменить представление.

Конечно, я прекрасно понимаю, что идеал — когда в HTML только семантика, а в CSS только представление — недостижим, и просто в данный момент придираюсь :) Ради простоты и стоимости поддержки можно (и нужно) отклониться от «идеологической чистоты» кода, как, например, и сделали в Semantic UI. В Bootstrap, кстати, сделали правильнее: классы, от которых зависит цвет кнопки, называются btn-primary, btn-secondary, btn-danger и т. д. — такие названия говорят о значении кнопки, а не о ее внешнем виде.

А вообще, в контексте исходного задания нет никакой семантики, к которой можно привязать классы.