Как правильно сверстать необходимый мне фиксированный хедер?

Question

[Владимир Кудинов]

Суть в следующем. Есть страница с заданной минимальной шириной 900px. Страница имеет два блока: шапка и контент. Вопрос по шапке. Она должна быть прилеплена к верхней части страницы (position: fixed). Но, когда окно браузера становится меньше минимальной ширины страницы часть шапки "уезжает" за границы экрана и его невозможно проскролить, потому что он фиксировано прилеплен к левому краю окна. Вот иллюстрация кейса.
Понятно, что JS легко поправит ситуацию. Мой вопрос в том, можно ли обойтись без Javascript?

Comments

[Владимир Кудинов]

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

Answer 1

[Ленар Фаттахов]

Я бы обернул header в div, который бы и был фиксированным
jsfiddle.net/9ev6w16n/4

Comments

[Ленар Фаттахов]

Но вообще лучше использовать медиа запросы и просто не делать фиксированных блоков на устройствах с маленьким разрешением

[Владимир Кудинов]

Тогда у хедера появляется отдельный скролл. Это не айс. Хочется, что он скроллился вместе с контентом, а не отдельно.

[Ленар Фаттахов]

qdinov: то есть вам нужно, чтобы шапка была фиксированна, но только по вертикали. К сожалению без js тут не обойтись, но это решается двумя строчками кода

Answer 2

[Сергей Иванов]

если так?
ну и media +

www.javascriptkit.com/dhtmltutors/cssmediaqueries2...

Comments

[Владимир Кудинов]

Не то. Хедер всегда должен быть той же ширины, что и контент.

Answer 3

[Юрий]

уберите min-width: 650px; из head

Comments

[Владимир Кудинов]

Не могу. Шапка должна быть той же ширины, что и контент.

[Юрий]

так если у head width:100%, то она будет занимать всю страницу с заданной минимальной шириной 900px.. и если нет других медиазапросов, то при окне<900px должна появляться горизонтальная прокрутка..
еще конечно было бы неплохо увидеть внешний контейнер и свойства..