Jump to content
  • 0

Сайт фиксированной ширины по центру


GeSTaM
 Share

Question

Постоянно сталкивался с 1 проблемой и все не могу найти хорошего решения.

Есть основной блок который фиксирует сайт по центру при помощи margin: 0px auto; но возникает проблема что когда контента мало сайт на 1 позиции как только контента больше высоты окна появляется скролл и соответственно сайт дергается в лево. Обычно избавлялся от этого при помощи body {overflow-y: scroll;}. Но хотелось бы узнать как это сделать при помощи js что бы не добавлять скролинг.

Я так понимаю поверх всего нужен еще 1 div который будет прижат к левому краю но его ширина будет размером с окно -20px на скролинг. Или есть еще другие варианты?

Подскажите плиз решение проблемы.

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

забей.

ты создаешь из мухи слона.

когда пользователь откроет страницу скролл или будет или нет.

контент просто так из ниоткуда не появится.

если бы так и было вопроса не было бы...

но мы не в 80х живем и динамичный контент сейчас по всюду, по этому и спрашиваю, что проблема есть!

Link to comment
Share on other sites

  • 0

Блин, если на странице больше контента, нежели высота виевпорта, то скролл должен появится.

Так работают все сайты.

И кстати, когда появится скролл, и ты все таки сделаешь глупость, и добъешся того что бы сайт не сместился, то он не будет выровнен по центру. Об этом подумал?

И еще, контент появится в один момент и не будет скорее всего уменьшатся, и скролл появится один раз и останется.

Я с этой проблемой столкнулся на заре обучения много лет тому назад и так же бился головой пока не понял простую истину - так работает веб: контента мало - скролла нет, контента много - скролл есть.

  • Like 1
Link to comment
Share on other sites

  • 0

Вот ещё одна мифическая проблема которую себе сами создают веб-разработчики. Скажите что у вас превосходный дизайн, удобная навигация на сайте, интересный контент, множество интересных фишек, посещаемость зашкаливает за все мыслимые пределы. Только вот одно мешает считать сайт идеальным — проблема с полосой прокрутки, не так ли?

Link to comment
Share on other sites

  • 0

Если вам мало аргументов предыдущих постов, то так и продолжайте бороться с "проблемой" body { overflow-y: scroll; }.

Чем проще -- тем лучше. Решение в 1-ну строку которое стабильно работает.

На JS вам придется написать немало строк, и это не будет элегантным решением.

Немало строк, так как ширина сроллбара может меняться в разных браузерах и в разных ОС.

А напрямую ширину его узнать нельзя, поэтому создают фейковые блоки, один в другом, измеряют ширину внутреннего, потом добавляют скролл и опять меряют, так вот из разницы можно узнать ширину скролла.

Возможны еще нюансы, так как сам я не делал, это, так сказать, описал общий подход.

Да и это лучше делать не при полной загрузке странички, а при построении DOM. Чтобы не было прыжка в сторону, после полной загрузки странички.

Тоесть еще вам нужно сделать кроссбраузерный DOM ready.

И это только для того чтобы узнать ширину.

А теперь представьте, как вы будете проверять наличие скролла?

сетинтервалом загрузить браузер до безумия? чтобы он вообще тормозить начал?

JS тут не нужен. Хоть сейчас браузеры и шустрее, но всеравно не стоит их так нагружать, если есть альтернатива.

А с строкой body { overflow-y: scroll; } ни проблем ни нюансов.

Link to comment
Share on other sites

  • 0

При использовании какого-нибудь фреймворка задача с получением ширины скролла немного упрощается, задача с кроссбраузерным DOM ready отпадает, но вот задача с тем чтобы вовремя поймать появление скролла останется.

Хотя... может кто предложит как это сделать не сильно нагружая браузер (сетинтервал фтопку)

Link to comment
Share on other sites

  • 0

И еще, контент появится в один момент и не будет скорее всего уменьшатся, и скролл появится один раз и останется.

и опять не угадали!

есть блок со вкладками где то мало контента, где то много и пока перейдешь по всем 5-6 вкладкам начинает напрягать что сайт постоянно дергается!

p.s. на счет того что сайт не будет по центру: лучше 1 раз -10px чем постоянно +10 -10 +10 -10!

p.s.s. Возможно вас (ответивших в этой теме) не напрягает данная проблема, но я не просил навязывать мне свое мнение и отговаривать меня! Я задал 1 просто вопрос какие решения данной проблемы вы знаете и считаете лучшими...

Link to comment
Share on other sites

  • 0

p.s. на счет того что сайт не будет по центру: лучше 1 раз -10px чем постоянно +10 -10 +10 -10!

Так не получится, как ни крути а во время появления скролла внутренняя ширина окна становится меньше. И поэтому если даже и подвинуть контент на 10 пикселей изначально - это ничего не даст, так как вам нужно во время появления скролла подвигать этот контент обратно.

p.s.s. Возможно вас (ответивших в этой теме) не напрягает данная проблема, но я не просил навязывать мне свое мнение и отговаривать меня! Я задал 1 просто вопрос какие решения данной проблемы вы знаете и считаете лучшими...

И получили ответ на свой вопрос:

body { overflow-y: scroll; }

Также я говорил в какую сторону копать, если вы все же решите делать это на JS

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