Фонд Отзывчивый Веб-Дизайн - PullRequest
0 голосов
/ 28 октября 2011

Я экспериментирую с фундаментом.Ссылка: http://foundation.zurb.com/docs/index.php

У меня есть очень простой Div:

<div style="background:url(gymBasketballHoops.jpg);height:100%;">&nbsp;</div>

Когда я устанавливаю высоту на 190 пикселей, он говорит 190 независимо от размера браузера, но когда я устанавливаю высотуиз 100% это только 50 пикселей изображения.Я использую много вещей на моем текущем сайте, который будет фоновым изображением, но я также хочу, чтобы эти высоты были отзывчивыми.Как мне это сделать?

1 Ответ

5 голосов
/ 28 октября 2011
<div style="background:url(gymBasketballHoops.jpg);height:100%;">&nbsp;</div>

Когда я устанавливаю высоту 190 пикселей, он говорит 190 независимо от размера браузера, но когда я устанавливаю высоту 100%, он показывает только 50 пикселей изображения.

Не видя остальную часть вашего HTML / CSS, я не могу порекомендовать ничего, кроме следующего ...

190px - это фиксированный размер и высотой 190 пикселей независимо от браузера или разрешения.

100% - это размер по отношению к внешнему контейнеру div, , а не его содержимого.Если внешний контейнер имеет высоту 500 пикселей, то ваш <div> будет равен 100 процентам от этого.

Поскольку <div> пуст, за исключением &nbsp;, вам нужно установить размер, или он будет толькобыть достаточно большим, чтобы вместить &nbsp;. Таким образом, без указанного размера, он будет реагировать только на размер своего содержимого.

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

...