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%;"> </div>
Run Code Online (Sandbox Code Playgroud)
当我将高度设置为190像素时,无论浏览器大小如何,它都会显示190,但是当我将高度设置为100%时,它仅显示50像素的图像.我在我当前的网站中使用了大量的东西,这将是一个背景图片,但我也希望这些高度响应.我该如何做到这一点?
<div style="background:url(gymBasketballHoops.jpg);height:100%;"> </div>
Run Code Online (Sandbox Code Playgroud)
当我将高度设置为190像素时,无论浏览器大小如何,它都会显示190,但是当我将高度设置为100%时,它仅显示50像素的图像.
没有看到你的HTML/CSS的其余部分,我不能推荐除以下内容之外的任何内容......
190px
是一个固定的大小,无论使用什么浏览器或分辨率,都将是190像素高.
100%
是相对于外部容器的大小div
,而不是其内容.如果外部容器高500像素,那么你<div>
将是100%.
由于<div>
除了之外是空的
,你必须设置一个大小,或者它只会大到足以包含
没有指定大小的So,它只会响应其内容的大小.
因此,您可以根据外部容器设置百分比,可以设置固定高度,也可以将其保留,并允许内容指定高度.