Не удается заставить контейнер сетки 960.gs занимать всю высоту браузера

Я работаю над проектом, используя Compass с плагином 960.gs. До сих пор он работал довольно хорошо, давая результаты, которые выглядят почти одинаково в разных браузерах без особых усилий. Однако я столкнулся с небольшой проблемой.

Div, который я использую в качестве основного контейнера сетки 960, имеет вертикальный мозаичный фон в CSS. Мне нужно, чтобы этот фон простирался до нижней части области просмотра браузера, но может показаться, что использование плавающих элементов в 960 как-то противоречит этому.

Несмотря на то, что высота контейнера установлена ​​на 100%, фон простирается только на часть пути вниз экрана, когда переполнение не указано. Установка скрытого переполнения исправляет это, но скрывает полосы прокрутки!

Как с этим справиться? Я использовал инспектор Webkit для просмотра кода и DOM на наличие проблем, и, насколько я вижу, нет ничего, что могло бы вызвать такое поведение.

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

<html>
<head></head>
<body>
   <primary background div>
       <960 container div>
           <header div>Stuff</div>
           <main content div>More Stuff</div>
           <footer div></div>
       </div>
   </div>
</body>
</html>

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


person John Wells    schedule 15.09.2011    source источник
comment
Трудно помочь, если вы не разместите ссылку на сайт или образец сайта, который показывает это.   -  person Candide    schedule 15.09.2011
comment
Отредактировано, чтобы включить немного кода.   -  person John Wells    schedule 15.09.2011


Ответы (1)


Трудно сказать без фактического кода, но предварительным условием для растяжения блока в 100% является одно из следующих:

  • Его родитель имеет абсолютную заданную высоту (например, 100px и т. д.).
  • Или все родительские элементы этого блока до тега HTML должны иметь height: 100%.

Итак, посмотрите на этот пример: http://jsfiddle.net/kizu/UvAxV/ — там на наведение кадра HTML и BODY получают height: 100%, и оболочка тоже растягивается до 100%.

Итак, в вашем случае вы должны убедиться, что HTML, BODY и «основной фоновый div» имеют height: 100%

person kizu    schedule 15.09.2011