基金会响应式网页设计

Sno*_*Mac 0 html css responsive-design zurb-foundation

我正在试验基础.链接:http://foundation.zurb.com/docs/index.php

我有一个非常简单的Div:

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

当我将高度设置为190像素时,无论浏览器大小如何,它都会显示190,但是当我将高度设置为100%时,它仅显示50像素的图像.我在我当前的网站中使用了大量的东西,这将是一个背景图片,但我也希望这些高度响应.我该如何做到这一点?

Spa*_*rky 5

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

当我将高度设置为190像素时,无论浏览器大小如何,它都会显示190,但是当我将高度设置为100%时,它仅显示50像素的图像.

没有看到你的HTML/CSS的其余部分,我不能推荐除以下内容之外的任何内容......

190px 是一个固定的大小,无论使用什么浏览器或分辨率,都将是190像素高.

100%是相对于外部容器的大小div,而不是其内容.如果外部容器高500像素,那么你<div>将是100%.

由于<div>除了之外是空的&nbsp;,你必须设置一个大小,或者它只会大到足以包含&nbsp; 没有指定大小的So,它只会响应其内容的大小.

因此,您可以根据外部容器设置百分比,可以设置固定高度,也可以将其保留,并允许内容指定高度.