css如何自动高

html-css030

css如何自动高,第1张

高度用百分比:

<div id="a"><div>Div2</div></div>

#a{height: 50%}

#a div{height: 50%}

按上面的意思,外面div应该等于网页高度的一半,里面div高度为网页高度的4/1,然而你会发现并不生效,原因是高度需要从外到内一层一层的继承,里面的div设百分比高度才会有效吗,所以你得给body或html先声明个样式:body{height: 100%}。

很多时候,网页内容多少在变化高度也在变,每个页面高度并不是统一的,用这个代码还是会产生不一样的内层div高度。

网页高度自适应,基本上忘了css吧,很多设计情况下css不管用,写几段js动态判断需求再动态的算出高度赋值给div。

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

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

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

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

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