css实现占满屏幕高度

html-css0367

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

实现div占满整个屏幕

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

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

2)通过100vh

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

3)使用定位拉伸

1、首先需要打开sublimeText编辑器。

2、然后需要按照图示代码编写一个html页面,并且放入一张背景。

3、效果显示如下图,图片还是原来大小的背景。

4、然后需要按照图示代码利用css属性background-size: cover把整个背景填充。

5、效果显示如下图,图片table高度把屏幕占满。

样式设置高度撑满整个页面,那么必须从最外层一层一层设置高度100%;代码如下:html,body,div{

height:100%}

这里默认div是第三层,如果要撑满全页面的话,那么外层必须也是高度100%;

下面举个例子:

<html>

<head>

<style>

*{

padding:0

margin:0

box-sizing:border-box}

html,body,div{

height:100%

}

</style>

<body>

<div>高度全屏</div>

</body>

</html>