精华内容
下载资源
问答
  • div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决方法 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置高度,在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最...

    div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决方法

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。

    大体结构


     

     


    css文件:(只写出了最主要的部分css代码:定义了最外层div的背景颜色和边框,同时定义了里面的div是浮动的)
    .outer{border:#F00 1px solid; background:#FF9 repeat;}
    .inner1,.inner2{float:left;}

    在IE中显示正常,如图1div+css总结鈥擣F下div不设置高度背景颜色或外边框不能显示

    (图1)
    在FF中显示不正常,边框线和背景色都不能正常显示,如图2

    div+css总结鈥擣F下div不设置高度背景颜色或外边框不能显示
    (图2)

    从网上查阅了一些资料,才对这个问题有了大体的认识。

    原因分析:由于在Firefox和opera中:如果里面的DIV是浮动的(float)而母体不会去计算子体float之后的height。而在IE中支持这种计算,所以IE下正常。

    所以出现这种问题有两个前提:1.外部div没有设置高度;2. 内部div是浮动的(带有float属性)。

    解决方法:
    给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里面的div来根据内容自动抻开外边的div,除非你确定的知道外部的div的高度的情况下,所以不建议使用这种方法。
    方法一:
    在内部最后一个FLOAT的div后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度

     
    <divclass="outer">
     
    <divclass="inner1">inner1</div>
     
    <divclass="inner2">inner2</div>
     
    <div style="clear:both"></div>
    </div>
     

     


    方法二:
    在.outer中加一句overflow:hidden;(这种方法我不是特别理解,但是经过试验,也是可以解决这个问题的div+css总结鈥擣F下div不设置高度背景颜色或外边框不能显示的解决方法)

     

    <div class="outer" style="overflow:hidden;">
     <divclass="inner1">inner1</div>
     <divclass="inner2">inner2</div>
    </div>


    overflow属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。



    展开全文
  • 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置高度,在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。 大体结构     ...

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。

    大体结构
    <div class="outer">
     

    <div class="inner1"></div>
     
    <div class="inner2"></div>
    </div>


    .outer{border:#F00 1px solid; background:#FF9 repeat;}
    .inner1,.inner2{float:left;}


    所以出现这种问题有两个前提:1.外部div没有设置高度;2. 内部div是浮动的(带有float属性)。

    解决方法:
    给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里面的div来根据内容自动抻开外边的div,除非你确定的知道外部的div的高度的情况下,所以不建议使用这种方法。
    方法一:
    在内部每个div后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度
    <div class="outer">
     

    <div class="inner1"></div>
     
    <div class="inner2"></div>
     
    <div style="clear:both;"></div>
    </div>
    方法二:
    在.outer中加一句overflow:hidden;(这种方法我不是特别理解,但是经过试验,也是可以解决这个问题的div+css总结鈥擣F下div不设置高度背景颜色或外边框不能显示的解决方法)
    overflow 属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。


    展开全文
  • 在内部最后一个FLOAT的div后加一个清除浮动(推荐),这样firefox和IE8/9就把里面不当成浮动,会自动计算内部div高度 <div class="fotio"> <div class="ovosudsaca"></div> <div class="ovosudsaca"></div> <div ...

    针对这种问题,是因为各个浏览器的w3c标准不同,造成的不同浏览器之间的差异问题:

    1.首先贴上代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    .fotio{background:#0000CC; zoom:1; /* IE */}
    .fotio:after {content:".";height:0; line-height:0; font-size:0; }
    .ovosudsaca{ float:left; height:100px; width:200px; background:#CCCCCC;border:1px solid red;}
    </style>
    </head>
    
    <body>
    <div class="fotio">
    <div class="ovosudsaca"></div>
    <div class="ovosudsaca"></div>
    </div>
    </body>
    </html>

    在IE7中显示的结果是:


    最外层的div显示是正常的,背景颜色可以显示出来,但是在IE8,IE9和火狐中显示的结果是:

    这是因为里面的DIV是浮动的(float)而母体不会去计算子体float之后的height。而在IE6/7中支持这种计算,所以IE下正常。

    所以出现这种问题有两个前提:

    1.外部div没有设置高度;

    2. 内部div是浮动的(带有float属性)。

    那么解决方案就是:给外层的div设置高度(不推荐),因为只有在确定外层div的高度是多少的时候,这种方法才是可取的,但是大多数情况下,我们都希望外层div能够自动计算内部div的高度,然后填充,所以

    方法一:

    在内部最后一个FLOAT的div后加一个清除浮动(推荐),这样firefox和IE8/9就把里面不当成浮动,会自动计算内部div高度

    <div class="fotio">
    <div class="ovosudsaca"></div>
    <div class="ovosudsaca"></div>
    <div style="clear:both;"></div>
    </div>

    方法二:(这种方法是百度的时候从别人的博客中看到的,我试过,挺管用)在最外层div中加入属性"overflow:hidden;";

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    .fotio{background:#0000CC;overflow:hidden; zoom:1; /* IE */}
    .fotio:after {content:".";height:0; line-height:0; font-size:0; }
    .ovosudsaca{ float:left; height:100px; width:200px; background:#CCCCCC;border:1px solid red;}
    </style>
    </head>
    
    <body>
    <div class="fotio">
    <div class="ovosudsaca"></div>
    <div class="ovosudsaca"></div>
    </div>
    </body>
    </html>
    


    展开全文
  • DIV设置最小高度

    千次阅读 2016-04-15 17:33:00
    本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息很少时候,我们就设置它一个...
    本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

    如何控制DIV最小高度又DIV自适高度

    我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个DIV高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

    我们知道,在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可。但是在IE7和firefox就不行了,它不会自动撑开。

    如果要设置DIV自适应高度,我们可以采用height:auto;这个属性;不过这个属性IE6又不支持了。是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开):

     
    1. .div{
    2. height:auto!important;
    3. height:100px;
    4. min-height:100px;
    5. }

    注释:因为!important在IE7和Firefox都可以读到,而且权重高于后面的height:100px;所以当在IE7和Firefox显示的时候,就会用了前面的height:auto!important;而IE6识别不了!important,auto对它也不管用,因此会应用了后面的height:100px的样式;而min-height:100px表示DIV最小高度为100px;此属性在IE7和firefox都可以识别。

    这样一个完美的即可以设置DIV最小高度,又可以DIV自适应高度的css样式就出来了,同时兼容了IE6、IE7和firefox!



    转自:http://www.phpshuo.com/show/13_40.html

    展开全文
  • CSS DIV高度不确定如何设置高度,是否需要加上height:auto属性? 在CSS布局中,常常最外层的DIV盒子不能确定具体的height高度值,不确定内容是否可多可少而不能确定父级盒子究竟设置多高。此时一般新手喜欢设置个...
  • div 设置高度问题

    千次阅读 2015-12-24 14:28:05
    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们...
  • div设置百分比高度不起作用

    千次阅读 2019-01-03 10:56:22
    1.首先检查父元素高度是否正常 父元素必须是height属性,min-height是管用的, 2. 检查父元素是否是flex布局 flex元素管用
  • span层在DIV设置高度

    千次阅读 2012-04-11 21:10:02
    span层在DIV中,想给span设置高度,style="height:xxxpx" 这样是没效果的   解决办法: style="display:inline-block;line-height:23px;
  • 在设计网页时,设置了div为自动高度或给height值,当div设置背景时在IE6可以显示背景颜色,但是IE7...原理:IE6可以再不给高度的情况下自动识别div高度而IE7,8需要指定高度 如果上述方法不行还有一种办法 2、在div的
  • 首先确保这个div是不是是block。默认情况下,div是block。可能在设置某些css样式的时候更改了也不一定。 ...不设置他的高度,设置它的overflow:hidden属性就可以自适应内容了。 good ...
  • div高度设置100%无效的问题

    千次阅读 2018-08-23 09:28:30
    今天写页面碰到了一个问题,div设置高度100%无效,于是进行检查。首先想到的是div父容器没有高度,于是检查父容器高度,通过谷歌开发者工具发现,父容器高度正常,那为什么元素高度无效呢。 然后我试着给父容器设置...
  • 在设计网页时,设置了div为自动高度或给height值,当div设置背景时在IE6...原理:IE6可以再不给高度的情况下自动识别div高度而IE7,8需要指定高度 如果上述方法不行还有一种办法 2、在div的下面在加一个清除div d
  • HTML给div设置百分比高度无效问题

    千次阅读 2017-05-02 16:30:05
    1.如下代码 方案一:同时给顶层父类标签body和HTML设置一个高度 导致这样的原因是html和body标签默认宽度是整行,高度就只是一部分并包括全部 HTML5画线、圆、矩形
  • 希望DIV高度会随着内容的变化而变化,但是又想设置DIV的一个最小高度,特别是当DIV有背景色或背景图片时最小高度设置会使视觉效果更好
  • 设置div高度等于屏幕高度

    千次阅读 2020-12-02 08:40:19
    问题:仅仅设置height: 100%不行 原因:浏览器默认html和body是没有高度的。或者说高度是auto的。 解决方法:html, body{ height: 100%; }
  • div设置了height为100%,但是页面上的div高度还是div中内容的高度,并是全页面的高度。 这时候需要写个css,内容为 &lt;style type="text/css"&gt;  html,body{  height: 100%;  } &...
  • 在写一个网页时,遇到div高度不定时,即高度设为auto,或者不设置时,加入的的背景图片不能显示的问题。在查阅相关资料后发现几种解决方法 出现这种情况有两个前提: 1.外部的div没有设置高度。 2.内部div浮动 解决...
  • 在外部的div的style中添加 overflow:hidden;  对overflow:hidden的详细理解: overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义...
  • css: body{margin:0px;font-size:18px;} #container{position:absolute;background-image:url(images/2.jpg);background-repeat:no-repeat;... <div id="container">   </div>  
  • 我遇到的问题是报告内容超过了我之前设置div高度,这个div是有背景色的,所以没有办法自适应整个文档对象的高度。一开始我设置了该div的height属性为100%,但是生效。后来通过dom操作的方法实现了。 问题溯源: ...
  • HTML学习之给div高度设置百分比生效的问题(二)

    万次阅读 多人点赞 2017-10-13 11:49:34
    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时...就三个div,div是块级元素,宽度会默认撑开,如果不设置高度时,默认内容会撑开高度
  • div设置最小高度,然后高度自适应

    千次阅读 2018-05-26 16:04:38
    style="min-height:550px;*+height:100%;_height:400px;"
  • CSS设置div高度自适应

    万次阅读 2018-12-18 09:55:41
    通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高 或 怎样实现同行div按照内容最多的那个设置高度。 如图:     实现1:添加表格特性 方式: 父级...
  • 设置div高度为屏幕高度

    千次阅读 2016-09-23 15:30:18
    ; charset=utf-8" /> ...<div id="container"> </div> total = document.documentElement.clientHeight; document.getElementById("container").style.height=total+"px";
  • 给div设置height:100%;<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>div高度</title> *{margin:0;padding:0} .nav{ width:200px;
  • 父亲div的高度随子div高度变化关系

    千次阅读 2017-03-06 20:25:50
    父亲div的高度随子div高度变化关系 #main{width: 300px;background: red; } #son1{width:100px; float: left;} #son2{width: 200px; float: left;} 块1 快2 说明:其中我在main
  • 网页前端div高度设置

    千次阅读 2018-11-18 10:23:03
    因为我们在div设计时会控制width,但是一般不会去设置height,除非你想要一个绝对布局另当别论,不然我们都会让里面的内容去自适应它的height,这就是height:100%无效的原因,你能对一个自适应高度的父类去保持和...
  • div+css布局问题:我用div1、div2、...如何设置才能让浮动后的div高度变化后超出最外层的div呢,即最外层的div的高度的变化是随内层div的高度变化决定? 解决办法如下: 标题 .div2{width:300px;height:200px;borde
  • js判断div高度设置父窗口iframe高度

    千次阅读 2017-01-19 14:07:35
    Javascript如何获取和设置div高度和宽度,并且兼容任何浏览器?看代码: http://www.itdos.com http://www.itdos.com 获取div1的宽高度: alert(document.getElementById("div1").offsetHeight); //...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 201,761
精华内容 80,704
关键字:

div不设置高度