Полный экран CSS с минимальным размером

Я создал макет в CSS/HTML со следующей структурой:Полный экран CSS с минимальным размером

structure

Навигация в колонтитулов прокручивает содержимое горизонтально, чтобы показать два разных экранов. Содержимое экрана фиксируется по высоте и вертикально центрировано, а макет всегда заполняет все окно.

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

У меня также есть несколько position:fixed<canvas> накладок, которые получают обрезанные по <html> и <body> элементам, которые устанавливаются height:100%; width:100%.

Я надеялся, что, установив min-height:700px на селектор <body>, я мог бы получить полосу прокрутки, чтобы появиться, когда окно стало слишком коротким. Это не похоже на работу.

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

источник

2011-12-18 Michael Forrest

Хорошо, что должно эффективно убедиться, что body всегда не менее 700 пикселей. Однако position: fixed все равно привяжет их к нижней части окна просмотра, поэтому вы по существу будете только прокручивать фон. Я считаю, что вы хотите, чтобы заголовки/нижние колонтитулы придерживались вершины и снизу, поэтому вы всегда можете увидеть полный контент между ними?

Итак, что-то вроде этой скрипки ведет себя так же, как и то, что вы ищете? http://jsfiddle.net/jblasco/qPB9k/8/

Он использует обертку div, которая делает min-height, и вместо этого использует абсолютно позиционированные столбцы.

источник

2011-12-18 22:19:35 justis

Это больше похоже на следующее: http://jsfiddle.net/jblasco/qPB9k/8/ - но в моем фактическом коде есть что-то другое, что мне нужно выяснить, почему это другая проблема ... –

Могли бы опубликовать некоторые вашего соответствующего HTML/CSS или сделать скрипку с тем, что у вас есть? – justis

Попробуйте это: overflow-x: auto;

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

источник

2011-12-19 06:14:34

Полный экран CSS с минимальным размером

ответ

Смежные вопросы