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

如题所述

代码:

效果:

原理:

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

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


代码原件:

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

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

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-12-09
html, body,.container {height: 100%; }
container的高度要设置成100%则前面一个元素要设置一个高度,所以我们追溯到html标签,给html标签定义高度为100%,这样就可以了,chrome中实测。
注意:
1.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义,而非百分比),div用百分比是无效的。如果坚持要用百分比,请换成table标签。
2.如果一定要用div标签,一种方法是通过JS脚本获取浏览器高度或宽度然后给标签,用纯CSS方法,是这样:给login_wrapper加一条属性“position:absolute”。本回答被网友采纳
第2个回答  2016-12-17
这个可以直接设置
<div style="width:1000px;height:500px;">
<div style="width:80%"></div>
</div>
注意:设置百分比 一定要看 他父元素,就是相对于谁来说,他的宽是百分之多少 !使用这个要有下面中任意一个:
【1】 div的父元素如果没有定义国定的高度或宽度(用px或者其它单位定义),div用百分比是无效的 。给他父元素宽高 ,子元素就可以用百分比了。
【2】另外就是 给div 加一条属性“position:absolute”,加上绝对定位,相对与body 定位。
相似回答