css实现占满屏幕高度

html-css044

css实现占满屏幕高度,第1张

实现div占满整个屏幕

1)通过css高度100%,但是要div的父级元素高度为100%

前提:以知父级元素并且父级元素高度可控

2)通过100vh

前提:适合移动端或者不用兼容IE的项目

3)使用定位拉伸

1、首先使用HTML编辑器sublime_text,点击进入。

2、开始写代码之前,先去查一下css中什么可以控制div的大小。

3、知道怎么控制div盒子大小了,开始写代码,先写3个div盒子,然后分别控制它们的大小,分别给盒子取名字d1,d2,d3。

4、分别给div设置不同的大小,为了方便区分给它们加上不同的颜色,详细的css这样写。

5、写完css之后,用网页打开查看最终显示的效果,能按照自己喜欢的大小来设置不同的div大小。

方法和详细的操作步骤如下:

1、第一步,创建或打开Web项目,新建html文件以及CSS文件,见下图,转到下面的步骤。

2、第二步,执行完上面的操作之后,图中显示了HTML页面代码,定义div并给出id属性等级,见下图,转到下面的步骤。

3、第三步,执行完上面的操作之后,将“height”值设置为零,使用“padding”属性的“top”或“bottom”,同时运用背景色来进行测试,见下图,转到下面的步骤。

4、第四步,执行完上面的操作之后,效果如下,如果进行放大或进行缩小,则宽度和高度将进行相应的更改,见下图。这样,就解决了这个问题了。