css 设置div 高度无效

Posted 2023-04-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 设置div 高度无效相关的知识，希望对你有一定的参考价值。

在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;
bodymargin:0px; padding:0px; height:100%; width:100%;
#showtopheight:13%; background-color:#00CCFF; border: 3px solid #000000;
#titleheight:100%; text-align:left; margin-left:5%; background-color:#FF99FF;
#adivtext-align:right;
</style>
</head>
<body>

<div id="showtop">
<div id="title">aaa</div>
<div id="adiv">ddd</div>
</div>
</body>
</html>
谢谢qisg931 ,可我就是想把 showtop 的 height 设成百分比值啊

只需要把HTML或BODY的高度设置为100%，然后在body内的任意DIV的高度用百分比表示，就可以了。具体代码如下：
<html>
<head>

<style>
bodyheight:100%;//设置网页高度为百分之百
.login_wrapperheight:100%;//设置整体布局高度为网页高度的百分之百
.login_header,.login_footerbackground-color:black;height:20%;//设置顶部和底部高度为百分之二十
.login_contentheight: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> 参考技术A 子容器的百分比高宽值，取决于父容器的高宽值了，
如果父容器没定义，子容器中使用百分比则无效，相当于设置为auto 参考技术B 呵呵,这和你作为容器的div有关,你把showtop的height设个数值px,就能看到效果了. 参考技术C 高度用自动就行了。

#showtopheight:auto;overflow:hidden;background-color:#00CCFF; border: 3px solid #000000;本回答被提问者采纳参考技术D 目前还没有纯css样式可以实现你想要的效果只能用具体数值来定义
不过用JavaScript应该能实现你要的效果

CSS设置div层充满整个网页

div的100%是从其上一级div的宽高继承来的，要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。

前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%。
解决方法：只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。

 1 html, body{ margin:0; height:100%; }
 2 
 3 .background{
 4     height: 100%;
 5     width: 100%;
 6     background: url(../images/index.jpg);
 7     background-size: 100%;
 8     background-position: top left;
 9     background-position: 0px 0px;
10     background-position: 100% 100%;
11 }

设置完html, body{ margin:0; height:100%; } 才会使div层的背景图片充满整个网页，不然div层总是撑不开

以上是关于css 设置div 高度无效的主要内容，如果未能解决你的问题，请参考以下文章

div设置宽度无效

css中body下的div 为何用百分比设置height无效，用像素值可以

div的边框宽度和边框颜色设置无效

CSS系列：height:100%设置div的高度

CSS设置div层充满整个网页

chrome 设置div高度无效