CSS 设置 高度撑满 页面

html-css010

CSS 设置 高度撑满 页面,第1张

样式设置高度撑满整个页面，那么必须从最外层一层一层设置高度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>

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

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

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

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

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