Представьте себе очень распространенный <header> <article> <footer> макет, где верхний и нижний колонтитулы являются фиксированными высотами, а статья становится такой же высокой, как требуется (страница прокручивается вертикально для размещения). Это похоже на большинство веб-страниц.
То, что я пытаюсь получить, является макетом именно так, но на его стороне, поэтому статья становится настолько широкой, насколько это необходимо, и страница прокручивается по горизонтали:
Мои первоначальные попытки использовались flexbox:
Вот моя первая попытка jsFiddle.
Соответствующий CSS:
body {
display: flex;
position: absolute;
height: 100%;
}
header {
background: green;
width: 400px;
flex: none;
}
article {
background: #CCC;
-webkit-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
column-gap: 0;
}
footer {
background: yellow;
width: 450px;
flex: none;
}
Но я отхожу от этого, поскольку я пробую другие вещи, например в этой скрипке, которая немного ближе. Проблема с этой попыткой заключается в том, что ширина статьи ограничена до 100% ширины окна просмотра, хотя текст перетекает вправо! (В моей статье используется CSS columns, что абсолютно важно для моего макета.)
Мои требования:
- Заголовок, статья, нижний колонтитул для высоты 100% (сделано)
- Заголовок должен быть шириной в 400 пикселей (сделано) и слева от содержимого (сделано)
- Нижний колонтитул должен быть шириной 450 пикселей (сделано) и справа от статьи (как?)
- Статья должна быть такой же широкой, как она должна быть без перекрытия нижнего колонтитула (как?)
Итак, мне нужна помощь в смелых целях. Что я могу сделать, чтобы статья не перекрывала нижний колонтитул справа? Существуют ли другие способы выкладки этой страницы, чтобы ширина статьи расширялась по мере ее содержимого?
- Должно работать в Chrome, Firefox и Safari (IE и Opera плюс, но не обязательно)
- Предпочтительно, чтобы JavaScript (или возможности CSS не могли быть удалены из спецификации)
- Простой, чистый CSS идеален
