UC知道css 设置div 高度无效
来源：百度知道 编辑：UC知道 时间：2024/06/08 09:51:09
在css中设置一个DIV标签高度,但是不管设为百分之多少无论在那个浏览器看都无效,请问这是为什么,怎么解决? 谢谢!
注意,我想把高度设为百分比值,而不是像素!
具体代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>产品展示</title>
<style type="text/css">
* {margin:0px; padding:0px;}
body{margin:0px; padding:0px; height:100%; width:100%;}
#showtop{height:13%; background-color:#00CCFF; border: 3px solid #000000;}
#title{height:100%; text-align:left; margin-left:5%; background-color:#FF99FF;}
#adiv{text-align:right; }
注意,我想把高度设为百分比值,而不是像素!
具体代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>产品展示</title>
<style type="text/css">
* {margin:0px; padding:0px;}
body{margin:0px; padding:0px; height:100%; width:100%;}
#showtop{height:13%; background-color:#00CCFF; border: 3px solid #000000;}
#title{height:100%; text-align:left; margin-left:5%; background-color:#FF99FF;}
#adiv{text-align:right; }
子容器的百分比高宽值，取决于父容器的高宽值了，
如果父容器没定义，子容器中使用百分比则无效，相当于设置为auto
目前还没有纯css样式可以实现你想要的效果 只能用具体数值来定义
不过用JavaScript应该能实现你要的效果
只需要把HTML或BODY的高度设置为100%，然后在body内的任意DIV的高度用百分比表示，就可以了。具体代码如下：
<html>
<head>
<style>
body{height:100%;}//设置网页高度为百分之百
.login_wrapper{height:100%;}//设置整体布局高度为网页高度的百分之百
.login_header,.login_footer{background-color:black;height:20%;}//设置顶部和底部高度为百分之二十
.login_content{height:60%;}//设置内容区高度为百分之六十
</style>
</head>
<body>
<div class="login_wrapper">
<div class="login_header">网页顶部</div>
<div class="login_content">网页内容</div>
<div class="login_footer">网页底部</div>
</div>
</body>
</html>
呵呵,这和你作为容器的div有关,你把showtop的height设个数值px,就能看到效果了.
高度用自动就行了。
#showtop{height:auto;overflow:hidden;background-color:#00CCFF; border: