div 不能占满整个页面

在页面中，有时候我们想自己写个遮罩层，让它的宽度和高度都占满整个可见页面区域，css设置好了，但是还是没有得到想要的

效果。

遮罩层用<div>表示，是body的直接子元素。

部分.html代码如下：

.css代码如下：

#bg{
position:fixed;
top:0px;
left:0px;

right:0px;

bottom:0px;
height:100%;
width:100%;
z-index: 37;
background-color: rgba(0,0,0,0.5);
}

html{

height:100%;

width:100%;

}

body{

height:100%;

width:100%;

}

margin:0px;

padding:0px;

}

显示的效果如下：

从上图可以看出，遮罩层没有占满整个浏览器页面。

分析：在css中已经设置了Body和html的width和height都为100%，并且设置*{ margin:0px;padding:0px},消除浏览器的默认设置

并且设置了div的height width都为100%，这个100%是相对父元素，也就是body，但是他并没有占满整个父元素。

解决方法：

css设置：width结合min-width height结合min-height (注意一般将width设成百分比都还会设置min-width ,height同理)

显示效果如下：

现在遮罩层占满整个可见页面了。

div 不能占满整个页面相关推荐

如何div高度占满全屏无滚动条
如何div高度占满全屏无滚动条 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
微信小程序设置背景占满整个页面
微信小程序,默认的根节点是<page></page>,所有内容都包裹在这个标签里,如何让页面的背景占满整个屏幕?? <page><view class=&qu ...
网页占满整个屏幕_CSS网页背景图片等比例占满整个页面的解决方案
需求是这样的: 一个登录界面,让一张背景图片充满整个页面.需求看似非常简单,可是测试人员提的一个bug引起了我深入的思考.先上图,正常界面是这样的: 界面结构很简单,一个登录框,加一张背景图.我们都知 ...
CSS网页背景图片等比例占满整个页面的解决方案
需求是这样的: 一个登录界面,让一张背景图片充满整个页面.需求看似非常简单,可是测试人员提的一个bug引起了我深入的思考.先上图,正常界面是这样的: 界面结构很简单,一个登录框,加一张背景图.我们都知 ...
html怎么能把div宽度占满,css如何让div边框不占宽度？
HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度呢? 我们做网站时可以添加边框box-sizing属性:让边框不 ...
div内嵌网页ajax,Div里面载入另一个页面的实现(取代框架)（AJax）（转）
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便今天突然遇到一个问题,那就是需要导入另一个页 ...
css设置背景图片等比例铺满整个页面
有次UI给我提出了bug说我的登录页的背景图变形了,后来查了下正确的背景图设置,如下: .login-box {width: 100%;height: 100%;background: url(&qu ...
css高度设置占满页面,《CSS》关于高度铺满的问题
场景一: 我想让这个div铺满整个页面. 方法一: 先让根元素和body铺满,再然div铺满,这样div就会继承body的高度了. :root, body { height: 100%; } .wra ...
html页面设计成占满屏幕,关于html页面布局
之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结. 一.div布局要固定宽高当div不设计长宽高而是自动由内部控件&qu ...

div 不能占满整个页面

div 不能占满整个页面相关推荐

最新文章

热门文章