Jump to content
  • 0

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


Temiks
 Share

Question

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

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

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

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

s_1411490707_8923742_31a3610498.png

--

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

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

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

s_1411491434_3195944_52939c4983.png

--

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

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


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

--

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

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

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

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

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

--

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

Edited by Temiks
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

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

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

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

s_1411490707_8923742_31a3610498.png

--

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

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

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

s_1411491434_3195944_52939c4983.png

--

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

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

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

--

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

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

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

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

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

--

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy