在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>之间使用即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-12-09 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
html, body,.container {height: 100%; }
container的高度要设置成100%则前面一个元素要设置一个高度，所以我们追溯到html标签，给html标签定义高度为100%，这样就可以了，chrome中实测。
注意：
1.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义，而非百分比)，div用百分比是无效的。如果坚持要用百分比，请换成table标签。
2.如果一定要用div标签，一种方法是通过JS脚本获取浏览器高度或宽度然后给标签，用纯CSS方法，是这样：给login_wrapper加一条属性“position:absolute”。
container的高度要设置成100%则前面一个元素要设置一个高度，所以我们追溯到html标签，给html标签定义高度为100%，这样就可以了，chrome中实测。
注意：
1.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义，而非百分比)，div用百分比是无效的。如果坚持要用百分比，请换成table标签。
2.如果一定要用div标签，一种方法是通过JS脚本获取浏览器高度或宽度然后给标签，用纯CSS方法，是这样：给login_wrapper加一条属性“position:absolute”。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-12-17 · 知道合伙人软件行家
百度网友d25c6f3
知道合伙人软件行家
采纳数：54
获赞数：280
邢帅教育班主任任职，累计服务了几千名学员，大家想在这里学习可以加我QQ 2824116625 学习群497187010
向TA提问 私信TA
关注
![]()
展开全部
这个可以直接设置
<div style="width:1000px;height:500px;">
<div style="width:80%"></div>
</div>
注意：设置百分比 一定要看 他父元素，就是相对于谁来说，他的宽是百分之多少 ！使用这个要有下面中任意一个：
【1】 div的父元素如果没有定义国定的高度或宽度(用px或者其它单位定义），div用百分比是无效的 。给他父元素宽高 ，子元素就可以用百分比了。
【2】另外就是 给div 加一条属性“position:absolute”，加上绝对定位，相对与body 定位。
<div style="width:1000px;height:500px;">
<div style="width:80%"></div>
</div>
注意：设置百分比 一定要看 他父元素，就是相对于谁来说，他的宽是百分之多少 ！使用这个要有下面中任意一个：
【1】 div的父元素如果没有定义国定的高度或宽度(用px或者其它单位定义），div用百分比是无效的 。给他父元素宽高 ，子元素就可以用百分比了。
【2】另外就是 给div 加一条属性“position:absolute”，加上绝对定位，相对与body 定位。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
