Как заставить страницу веб-страницы отображаться с минимальным разрешением, независимо от того, насколько маленький область просмотра уменьшается?

Question

Я довольно новичок в сложном CSS, и у меня есть вопрос - у меня есть страница, которая размещает плавающий элемент внизу страницы. Это достигается установкой Bottom: 0 и Position: Absolute.

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

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

По сути, я хочу сказать браузеру: неважно, насколько маленькое окно, никогда не рендерит страницу размером менее 800x600.

Answer 1

Вы можете установить html, body { min-width: 800px; min-height: 600px; }

YMMV в разных браузерах.

Answer 2

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

Answer 3

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

Я думаю, что некоторым 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 для отмены указанного значения.