在CSS 中如何使用百分比设置页面 Div 高度?

html-css020

在CSS 中如何使用百分比设置页面 Div 高度?,第1张

html, body,.container {height: 100%}

container的高度要设置成100%则前面一个元素要设置一个高度,所以我们追溯到html标签,给html标签定义高度为100%,这样就可以了,chrome中实测。

注意:

1.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义,而非百分比),div用百分比是无效的。如果坚持要用百分比,请换成table标签。

2.如果一定要用div标签,一种方法是通过JS脚本获取浏览器高度或宽度然后给标签,用纯CSS方法,是这样:给login_wrapper加一条属性“position:absolute”。

代码:

效果:

原理:

先给父级<div>设置宽度(像素)

然后再子<div>里,设置百分比,如图示。

代码原件:

<div style="width:80pxheight:50pxborder:#FF0000 3px solid">

        <div style="width:20%height:50%border:#CC33FF 3px solid"></div>

    </div>

复制到<body></body>之间使用即可。