Не удается получить контейнер сетки 960.gs, чтобы охватить всю высоту браузера - PullRequest
Новая
       30

Не удается получить контейнер сетки 960.gs, чтобы охватить всю высоту браузера

0 голосов
/ 15 сентября 2011

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

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

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

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

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

<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, в этом нет ничего проблемного. Я ничего не плаваю, и больше всего я делаю небольшие отступы и поля ...

1 Ответ

2 голосов
/ 16 сентября 2011

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

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

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

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

...