Как я могу заставить страницу веб-страницы отображаться с минимальным разрешением, независимо от того, насколько мало сжимается область просмотра?
Я новичок в сложном CSS, и у меня есть вопрос: у меня есть страница, на которой плавающий элемент располагается внизу страницы. Это достигается путем установки значений Bottom: 0 и Position: Absolute.
Когда пользователь изменяет размер своего браузера до очень маленького размера, этот элемент закрывает другой контент на странице.
В идеале элемент продолжал бы плавать в нижней части браузера при нормальных и больших размерах, но если бы окно браузера было слишком маленьким, браузер принудительно использовал бы полосу прокрутки вместо того, чтобы перемещать плавающий элемент дальше.
По сути, я хочу сказать браузеру: каким бы маленьким ни было окно, никогда не отображайте страницу меньше 800x600.
Ответы 3
Вы можете установить html, body { min-width: 800px; min-height: 600px; }
Однако YMMV в разных браузерах.
Это действительно зависит от того, должен ли плавающий нижний колонтитул всегда быть видимым или он может прокручиваться вниз, когда окно браузера маленькое.
Я думаю, что некоторым javascript может быть проще управлять, чем решением css. Имейте в виду, что min-width и min-height работают не во всех браузерах.
Вы можете использовать jquery, чтобы упростить это. В $ (окно) .resize (обратный вызов) может использоваться для установки функции обратного вызова для обработки изменения размера окна.
Я также использую размеры окна как часть моего кода изменения размера. var wh = Math.max (600, $ (окно) .height ()); var ww = Math.max (800, $ (окно) .width ());
Затем я могу установить размер div на моей странице в зависимости от размера окна. $ ('div # mydiv'). css ('ширина', ww); Вы также можете установить значение auto, чтобы сбросить указанное значение.
Мне грустно, что нет чистого CSS-решения, но, возможно, вы правы. Конечно, меня устраивает прокрутка нижнего колонтитула после определенного размера; В данном случае это предпочтительное поведение. Я думал о том, чтобы попробовать решение JS, и это может быть единственный выбор, который у меня есть. Спасибо.
Я знаю, что это немного обман, но вы можете использовать старый трюк, вставив изображение с требуемой минимальной шириной в плавающий элемент и того же цвета, что и оно. В этом случае он фактически невидим, но предотвращает сжатие элемента и, следовательно, всей страницы.
Спасибо! Я тоже подумал об этом - проблема в том, что изображение просто выталкивается «за» верхнюю часть браузера за пределы экрана; Это не предотвращает подъем нижнего колонтитула слишком высоко и не устанавливает минимальную высоту рендеринга; (
Упс. Извиняюсь. Я проверю, какой тип нижнего колонтитула вы используете, и посмотрю, что работает!
Может я не так делаю? тело {минимальная ширина: 800 пикселей; минимальная высота: 600 пикселей; } (HTML задает то же самое. Snip для подсчета символов) Плавающий нижний колонтитул по-прежнему остается в нижней части окна и перемещается через другие элементы и верхнюю часть экрана.