Как стать автором
Обновить
6
0

Пользователь

Отправить сообщение
возможность переместить мозг в искусственное хранилище при сохранении его жизнедеятельности

жуткие перспективы
В принципе верно, но судя по документу dev.w3.org/csswg/css-flexbox/ готовится очередная третья редакция Flexbox Layout от 2013 года, которая сейчас находится в состоянии Editors Draft и видимо заменит предыдущие версии Flexible box Layout'а 12го и 9го годов.

Говоря практически — зачем использовать экспериментальную технологию макетирования, используя которую придется добавить два избыточных wrap-элемента в структуру документа для поддержки деградации в table-layout, если в случае упомянутом в разделе «Решение» достаточно воспользоваться простой блочной разметкой (реализованой в том числе в IE 8) с процентым значением высоты без добавления каких-либо добавочных элементов?
Спасибо! Важно заметить, что IE поддерживает flexbox начиная только с десятой версии, а реализация стандарта в других браузерах находится в стадии активной разработки (приходится пользоваться префиксами -moz-, -webkit и т.д. в написании CSS правил). Тем не менее еще раз спасибо Вам Станислав за то что упомянули флексбоксы в комментарии, безусловно это очень крутая технология.
Помимо Table, Block, Inline-block layout'ов (значений параметра display) стандарт HTML5 содержит еще один дополнительный Flexbox layout (флексбоксы они же flexible box layout) — нововведение в CSS3 для упрощения верстки «резиновых» блоков.

Технология флексбокос существует в двух версиях: старой образца 2009го года (поддерживается Chrome, Firefox 2+, Safari 3.1+) от которой сейчас постепенно отказываются и новой 2012го (Chrome 21+, Opera 12.1+, IE 10). К сожалению на данный момент (июнь 2013го) в Mozilla Developer Network (MDN) в перечне layout'ов статус реализации flexbox layout'а все находится еще в состоянии «experimental» (ссылка на источник в MDN).

Детальнее о технологии можно почитать в таких публикациях:
developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
www.html5rocks.com/en/tutorials/flexbox/quick/
css-tricks.com/old-flexbox-and-new-flexbox/
Антон, спасибо Вам за замечание! По заданию так раз article должен растягивать aside, а не наоборот. Возможно путаница возникла из-за того, что что блок расположеный слева упоминется как второй в постановке задачи (поскольку он второй по приоритету — то есть содержит менее приоритетный контент и зависит в визуальном отображении от первого). Чтоб было нагляднее, чуть подправил описание (добавил упоминание о том, что второй блок находится слева от первого) и привязал скриншот к последнему примеру.

Важно отметить что для работы IE 8 с новыми HTML5-тэгами aside и article необходимо добавить избыточное CSS-правило display: block для ASIDE, ARTICLE тэгов и вставить в HEAD-раздел веб-страницы следующий js:
<!--[if lt IE 9]>
   <script type="text/javascript">
      document.createElement('article');
      document.createElement('aside');
   </script>
<![endif]-->


надеюсь статья кому-нибудь пригодится

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность