css 设置height高自动无效,但设置指定值有效!

Posted

tags:

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div border-bottom:#3399FF solid 1px;
.post-div width:336px; float:left; background:#FF0033;
.div-center float:left;
.corner- height:53px; background:url(div-b.png);
.center-cwidth:15px;
.corner-theight:15px; width:15px;
.div-valuewidth:306px;
.topLeft width:54px; top:0; left:0; background-position:0px 0px; float:left;
.topRight width:12px; top:0; right:0; background-position:-54px 0px; float:right;
.bottomLeft bottom:0; left:0; background-position:0px -51px; float:left;
.bottomRight bottom:0; right:0; background-position:-52px -51px; float:left;

.topCenter width:270px; top:0; background:url(div-top-c.png); float:left;
.bottomCentertop:0; background:url(div-bottom-c.png); float:left;

.centerLeft height:80px; background:url(div-center-l.png); float:left; border-bottom:#66FF00 solid 1px; /* 高度设定 有效 */
.centerCenterbackground:#99CC00; float:left;
.centerRight height:auto; background:url(div-center-r.png); float:right; /* 高度自动 无效 */
</style>
</head>

<body>
<div class="post-div div-margin"><!-- begin post -->
<div class="div-top">
<div class="corner- topLeft"></div> <!-- 1 -->
<div class="corner- topCenter"></div><!-- 2 -->
<div class="corner- topRight"></div><!-- 3 --></div>

<div class="div-center">
<div class="center-c centerLeft"></div><!-- 4 -->
<div class="center-c div-value centerCenter">w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br /></div><!-- 5 -->
<div class="center-c centerRight"></div><!-- 6 --></div>

<div class="div-bottom">
<div class="corner- corner-t bottomLeft"></div><!-- 7 -->
<div class="center- corner-t div-value bottomCenter"></div><!-- 8 -->
<div class="corner- corner-t bottomRight"></div><!-- 9 --></div>

</div><!-- end post -->
</body>
感谢两位的回答!
height:100%; 也不行!!
auto 是自动拉伸!但它是边框,我不可能在它里面添加数据!

我的问题是:在一个层里有三个并排的层。两边是边框,要边框层随内容层的而拉伸!

这样高度实现起来是比较麻烦,

但是可以换个思路去解决

1.用js去解决

2.利用背景实现视觉上解决,可以 .centerCenter的背景设置成

参考技术A 解决:

一般来说,高度设定auto是在浏览器和设计栏里看不到的。

就你这个来说,设定了高度的可以看得到,没有设定的就无效了。

auto是用来兼容的,一般的设定高度的div里面的东西多了会在一些浏览器里看

得出,数据溢出,但设定了auto就可以了。

就是自动拉伸了。

呵呵,不知道是不是你的意思。如果不是的话,那也没关系的,对吧。
参考技术B height: 100% 参考技术C height:auto

CSS默认下固定高度,自动适应

css默认下有一个高度,然后根据内容的填充需要自动适应内容的css写法:

div min-height:400px; height:auto;

    设置最小高度,也就是固定的高度。

    设置高度自适应。

以此类推也可以定义最大高度,高度自适应,当内容填充超过一定程度高度将不再增加。

参考技术A 让所有浏览器都支持min-height(最小高度)的CSS样式代码,完整:
min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px":""); 这里的1000和1000px是你需要的数值,注意3个数值的相同。

用这个就可以搞定了

再给你最大高度的

让所有浏览器都支持max-height的CSS样式代码,完整:
max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)<1000?"1000px":""); overflow:hidden;这里的1000和1000px是你需要的数值,注意3个数值的相同。
参考技术B 你固定高度了 还怎么自动适应 你要是说随着里面内容而变大的话 那可以
你可以用最小高度min-height
楼下的大侠们 别搞的那么复杂 别人新手会搞不懂的!~
div height:auto!important; min-height:500px; height:500px;
OK了!~
参考技术C 用这个就可以搞定 参考技术D min-height:300px;_height:300px这样就可以了

以上是关于css 设置height高自动无效,但设置指定值有效!的主要内容,如果未能解决你的问题,请参考以下文章

css问题,设置的height:auto;无效,设置像素值就有效,没有设置过浮动,

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

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

CSS默认下固定高度,自动适应

CSS一些总结

div设置宽度无效