DIV CSS 如何让网页中的某DIV自动适应屏幕高度自己变如下图

html-css019

DIV CSS 如何让网页中的某DIV自动适应屏幕高度自己变如下图,第1张

1、首先创建或者打开我们的web项目，新建一个html文件和css文件即可，如图所示。

2、html页面代码如图所示，定义一个div，然后给一个id属性即可。

3、这里是使用宽度的百分比之后，设置高度值为零，然后使用padding属性的top或者bottom的值（可以是任意百分比），背景颜色作为测试。

4、然后在浏览器运行之后的效果是这样的哦，放大缩小浏览器，宽高会随之改变。

5、这个方法是使用expression来设置高度即可。

html,

body { height: 100%padding: 0margin: 0}

.mother { height: 100%padding: 100px 0 0box-sizing: border-box }

.A { height: 100pxmargin: -100px 0 0background: #BBE8F2} 

.B { height: 100%background: #D9C666}

<div class="mother">

<div class="A">头部DIV</div>

<div class="B">下部DIV</div>

</div>

代码效果

你可以看下效果，望采纳。