Неизвестная ширина position: fixed

[Temiks]

Добрый вечер.

Возникла одна проблема: нужно реализовать фиксированное меню, у которого ширина зависит от ширины контента.

Контент имеет минимальную и максимальную ширину, в случае последнего - выравнивается по центру экрана. Так же сам блок контента унаследовал отступы элемента body в размере 62px;

Т.е как это все должно быть на изображении:

--

Прописал блоку с position: fixed следующие:

box-sizing: border-box;position: fixed;width: 100%;max-width: 1600px; // блок контентаheight: 100px;

И все бы ничего, только если ширина экрана меньше 1600рх, то получается вот это:

--

Помогите, пожалуйста, исправить

p.s играл с положительным и отрицательным margin-ом и padding-ом, но все равно не получилось

UPD: Я в общем не знаю почему, но когда я создаю тему на этом форуме, меня после как-будто осеняет

--

В общем решение простое то:

1. Блоку с position: fixed прописываем

width: 100%;left: 0;padding: 0 62px; // в моем случае нужны минимальные оступы

2. В нем создаем блок, которому пишем

min-width: 600px;max-widht: 1600px;height: 100px;margin: auto;

--

Вот и задача решена.   Может кому-то будет полезно. Enjoy!

Edited September 23, 2014 by Temiks

[Sergik+]

  On 9/23/2014 at 5:05 PM, Temiks said:

Добрый вечер.

Возникла одна проблема: нужно реализовать фиксированное меню, у которого ширина зависит от ширины контента.

Контент имеет минимальную и максимальную ширину, в случае последнего - выравнивается по центру экрана. Так же сам блок контента унаследовал отступы элемента body в размере 62px;

Т.е как это все должно быть на изображении:

--

Прописал блоку с position: fixed следующие:

box-sizing: border-box;position: fixed;width: 100%;max-width: 1600px; // блок контентаheight: 100px;

И все бы ничего, только если ширина экрана меньше 1600рх, то получается вот это:

--

Помогите, пожалуйста, исправить

p.s играл с положительным и отрицательным margin-ом и padding-ом, но все равно не получилось

UPD: Я в общем не знаю почему, но когда я создаю тему на этом форуме, меня после как-будто осеняет

--

В общем решение простое то:

1. Блоку с position: fixed прописываем

width: 100%;left: 0;padding: 0 62px; // в моем случае нужны минимальные оступы

2. В нем создаем блок, которому пишем

min-width: 600px;max-widht: 1600px;height: 100px;margin: auto;

--

Вот и задача решена.   Может кому-то будет полезно. Enjoy!

Магия форума Сам бывает пару дней хрень какую нибудь выдумываю а только сяду открывать

тему так сразу решение приходит.

[coolhtml]

Проблема всех начинающих верстать интуитивно не понимая что делая. Я тоже таким был. Как вообще удаленный из потока документа и зафиксированный элемент может зависеть от кого-то кроме окна просмотра.