css百分比布局高度问题及盒模型

二全 发布于 2016/09/19 18:55
阅读 455
收藏 0
大家好,前端小白。最近做页面发现一个理解不了的问题。废话不多说-- 把html body的宽高都设置为百分之百,body下面的div盒子高度为10000px,现在body设置一个背景图片。背景图片的background-size:100%;好了。按我的理解,背景图片会铺满整个页面,实际恰恰相反,下面会留有一个很大的空白。查看盒模型,html的宽度居然为600px。。。。。。。。也许布局方式有问题,也许是其他问题。想了解下为什么会出现这种情况,或者百分比布局高度是怎么布局的呢等到。。。。。。。。谢谢。。

b


嘎嘎


加载中
0
吴笑笑
强烈建议不要在意这个问题的答案而是找个比如w3c这样的网站先慢慢从头一点点学起
全~
全~
嗯,有一定基础。就是这块想了解下什么原因。
0
唐佳
唐佳

由于没看到代码,也不知道你写了多少样式,我按照我猜想的写点:


  1. 根据我根据你描述的情况做了一个页面,图片能铺满整个页面;
  2. 考虑是你的背景图片的background-size:100%;,我是写的background-size:100% 100%;,分别代表x轴和y轴图片尺寸100%平铺,background-size:100%;加上background-repeat:no-repeat;以及你div为10000px的高度并且图片高度小于10000px应该是会导致大量的空白的。
  3. 关于html的宽度,它是会随着视口的宽度不断变化的,与高度产生的空白没有关系;
  4. 另外,body上面width:100%;height:100%;是可以去掉的,不会产生什么影响;关于100%高度,必须是父元素有一个固定尺寸的高度,设置了100%才能有用;我测试了一下固定html标签高度为1000px并将body标签高度设置为100%,没有什么效果,然而我设置html标签高度为1000px并加上!important,是有效果的,并且如果高度高于div,会产生一定的空白。

以上逻辑不是很清楚,你可以自己测试一下效果。


二全
谢谢!
0
二全

引用来自“唐佳”的评论

由于没看到代码,也不知道你写了多少样式,我按照我猜想的写点:


  1. 根据我根据你描述的情况做了一个页面,图片能铺满整个页面;
  2. 考虑是你的背景图片的background-size:100%;,我是写的background-size:100% 100%;,分别代表x轴和y轴图片尺寸100%平铺,background-size:100%;加上background-repeat:no-repeat;以及你div为10000px的高度并且图片高度小于10000px应该是会导致大量的空白的。
  3. 关于html的宽度,它是会随着视口的宽度不断变化的,与高度产生的空白没有关系;
  4. 另外,body上面width:100%;height:100%;是可以去掉的,不会产生什么影响;关于100%高度,必须是父元素有一个固定尺寸的高度,设置了100%才能有用;我测试了一下固定html标签高度为1000px并将body标签高度设置为100%,没有什么效果,然而我设置html标签高度为1000px并加上!important,是有效果的,并且如果高度高于div,会产生一定的空白。

以上逻辑不是很清楚,你可以自己测试一下效果。


非常感谢你的解答。问题基本算是解决,是background设置的时候背景的position和size都设置了,造成冲突,去掉一个就可以了。至于百分比布局的话,html和body都设置百分之百,下面的盒子高度设置百分比才可以起作用,并且查看盒模型html, body 的高度都是屏幕尺寸的大小,所有我的理解的话,body背景图片background-size:100%的话,只是铺满屏幕的高度了,但是div的高度是远远高于body的高度的,这样留白就出来了。。。。。也许理解的不是很准确。谢谢。
返回顶部
顶部