Страница изменения размера не переходит на полосу прокрутки без абсолютной ширины

Question

Итак, у меня есть следующая страница с панелью навигации: http://michigangurudwara.com/pclass/, и она не выглядит плохо, но когда вы изменяете размер браузера, все перекрывается.Я хочу, чтобы панель навигации заполняла всю ширину, а затем при изменении размера экрана должна появиться полоса прокрутки, но когда я делаю ширину: 100% в классе .navbar, этого не происходит.Единственный способ получить полосу прокрутки - с абсолютной шириной.Но если я это сделаю, я не смогу использовать всю ширину экрана для мониторов разных размеров.Как бы я это сделал?

Answer 1

Установить минимальную ширину ...

.navbar {
    min-width: 1000px; }

Если значение меньше этого, появится полоса прокрутки.

Answer 2

Это, безусловно, другой стиль навигации, так как навигационная панель всегда одинаковой ширины может создать большие проблемы для многих пользователей.Лучший подход - установить ширину страницы, скажем, 1000 пикселей;а затем с обеих сторон автоматически задайте размеры полей.

.navbar{
    width:1000px;
    margin:auto;
}

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

Я также собирался предложить minimum-width:100%;, но я думаю, что вы все равно столкнетесь с той же проблемой.

Проблема заключается в том, что при использовании процентов шаблон будет изменять размер до ширины браузера, гдетак как пиксели всегда будут представлять абсолютное значение, как вы упоминаете.