css height:100%为什么不起作用?

css height:100%为什么不起作用?怎么解决?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1、百分比%宽高 的设定

对于w3c中对width 与height的解释,可以明确%设定宽高是根据父级宽高来定的:

1.jpg

2、width:100%和height:100%

随意写一段代码,设置一个背景颜色以便查看效果

1.jpg

2.jpg

3.jpg

4.jpg

可以看到,宽度的100%很容易实现,但是height:100%就有点难,这是为什么呢?

3、浏览器是如何计算高度与宽度的

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度,如下:

5.jpg

6.jpg

但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。

即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。

4、解决方法

%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height;

要特别注意的一点是,在之中的元素的父元素并不仅仅只是,还包括了。

所以我们要同时设置这两者的height,只设置其中一个是不行的:

7.jpg

8.jpg

这样就噢了。

更多web前端知识,请查阅 HTML中文网 !!

以上就是css height:100%为什么不起作用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏