Как получить жидкое содержимое тела, как Google Zeitgeist 2011? - PullRequest
0 голосов
/ 26 февраля 2012

Мой веб-сайт: http://designobvio.us/portfolio/index.html

Планируемый макет веб-сайта: http://www.googlezeitgeist.com/en/top-searches/rebecca_black

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

Проблема 1: кажется, что все на 100% высоты (что я никогда не могу заставить работать> _ <;;) </p>

Проблема2: я использую grid960, и изображение будет перемещаться по сетке 960.

Проблема 3: при уменьшении размера окна изображение уменьшается.

Проблема 4: при уменьшении размера окна текстовая панель накладывает изображение.

Я сделал PDF макета.Вот пример с наложением сетки: http://www.designobvio.us/portfolio/homepage%20copy.pdf

Есть ли кто-нибудь, кто может продемонстрировать этот макет в jsfiddle или, по крайней мере, подсказать мне самому?Я действительно очень тупой.

Спасибо

1 Ответ

2 голосов
/ 26 февраля 2012
  • 100% высоты означает, что элемент будет использовать высоту родительского элемента.Если вы хотите, чтобы div, скажем, #wrapper, имел высоту окна 100%, его родительский элемент также должен быть установлен на 100% высоты и так далее.Итак, в основном: html, body, #wrapper {height: 100%;} пример: http://jsfiddle.net/Vy6hP/
  • Почему плавающая проблема?И если вы хотите создать динамическую компоновку, вам не следует использовать систему 960, а скорее гибкую (т.е. основанную на%, а не на пикселях)
  • Придайте изображению max-width: 100%;и все должно работать нормально (пример: http://jsfiddle.net/Vy6hP/1/)
  • Я не понимаю ваш последний вопрос
...