合肥亚铭告诉你div设置高度宽度满屏100%_

合肥亚铭告诉你div设置高度宽度满屏100%

时间:2019-09-04 09:28浏览次数:
1.制作网页时会遇到body里的内容很少,哪么怎么才能让body的高度满屏呢;
2.当内容超出屏幕高度时,内容的高度就是body的高度。
 
方法一:没有设置body的高度,内容不满屏,但是背景色却铺满整个屏幕,方法如下:
 
html {} // html不设置背景色
body { background: pink; }
 
 
*注:可是为什么我们在写项目的时候,却并没有达到这个效果,而是内容多高,body背景就是多高呢?
细心发现html设置了一个背景色。
可是为什么html设置了背景色,body的满屏背景色却失效了呢?我猜测这可能是和浏览器的机制有关,浏览器会先找html有没有背景色,如果没有则往下查找body的,如果body有则取它来做底板的颜色。
 
方法二:
 
html, body { height: 100%; }
 
*注:如果内容没有超过屏幕的高度,是没有任何问题, 但是当内容高度大于屏幕高度时,body的高度被写死,高度和屏幕高度相等,并没有满足我们的需求;效果如图:
 
 
方法二:
 
<style>
html { height: 100%; overflow: auto; }
body { min-height: 100%; }
</style>
 
 
 
在视觉上,这个方法是可以实现我们的需求的。
可是细心的会发现,如果内容超过一屏幕,滚动条向下滚动的时候,html的高度只有一屏幕的高度
 
方法三:
 
html, body {
height: 100%;
overflow: auto;
}
 
 
可以实现,但是html和body的高度是屏幕的高度
深入沟通,只为更深度的合作
* 请认真填写需求信息,我们会在24小时内与您取得联系。
Copyright © 合肥赢点网络营销策划有限责任公司. All Rights Reserved.皖ICP备15002860号-1 站长统计 本站关键词:合肥网络公司公众号开发微信小程序