DIV+CSS高度自适应问题（firefox里出错）
CSS \u5728\u706b\u72d0\u91cc\u7edd\u5bf9\u9ad8\u5ea6\u7684\u95ee\u9898\u3000\u3000\u60a8\u597d\uff01\u5f88\u9ad8\u5174\u4e3a\u60a8\u7b54\u7591\uff01
\u3000\u3000\u5728DIV\u5185\u90e8\u7684\u6700\u540e\u8ffd\u52a0clear:both\u6837\u5f0f\u5c31\u53ef\u4ee5\u4e86\uff0c\u6bd4\u5982\uff1a
Jmedia Design
www.jmedia.cn
\u3000\u3000\u60a8\u53ef\u4ee5\u5728\u706b\u72d0\u793e\u533a\u4e86\u89e3\u66f4\u591a\u5185\u5bb9\u3002\u5e0c\u671b\u6211\u7684\u56de\u7b54\u5bf9\u60a8\u6709\u6240\u5e2e\u52a9\uff0c\u5982\u6709\u7591\u95ee\uff0c\u6b22\u8fce\u7ee7\u7eed\u5728\u672c\u5e73\u53f0\u54a8\u8be2\u3002
\u5f00\u4f60\u7684css\u662f\u600e\u4e48\u5199\u7684\u4e86\uff0c
\u7b2c\u4e00\u3001\u9ad8\u5ea6\u8bbe\u7684\u4e0d\u5bf9
\u7b2c\u4e8c\u3001\u5982\u679c\u6709float\u6ca1\u6709\u9664\u53bb
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>解决ie6 7 8 ff chrome div高度自动增加问题 by saruri </title>
</head>
<body style="padding:0px; margin:0px; min-height:300px;">
<style>
.abc{ width:940px; min-height:60px;
max-height:none; border:1px solid #999; background-color:#060;}
.cde{width:940px;
max-height:none; border:1px solid #999; background-color:#060;}
.fgh{width:940px;
height:60px; max-height:none; border:1px solid #999; background-color:#060;}
</style>
<div class="abc">
<p>因为只有ie6的div高度是自动增加的 所以在别的就出现了内容溢出用auto没有用的 需要用min-height和max-height来实现,相似的问题我在别的问题里已经回答过了.</p>
<p><strong>
第三个层固定高度其他的高度自适应 min-height 和max-height 是ie 7 8 ff chrome支持的 ie6div高度自适应 用不着</strong></p>
<p>如果div里有float <br>那么<br>加入清除浮动 clear的div可以解决内容溢出问题<br>容内容内容内容内<br>容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容<br>内容内容内<br>容内容内容内容内容内容内容内<br>容内容内容内容内<br>容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>
<div class="cde">
<br>
内容内容内容内容内容内容内容内容内容<br>内容内容内<br>容内容内容内容内容内容内容内<br>容内容内容内容内<br>容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容<br>内容内容内<br>容内容内容内容内容内容内容内<br>容内容内容内容内<br>容内容内容内容内容内容内容内容内容内容内容内容
</div>
<div class="fgh"></div>
</body>
</html>
火狐浏览器默认是没有高度的，在这里定义自动获得高度是无效的。如果层没有设置宽和高，通常火狐等浏览器是默认没有宽和高的，只有在你给给该层定义了浮动fload左或右浮动时浏览器才可以获得该层的宽和高。
方法一：你可以在这个层外加一个固定宽的层，然后再给里面的层加一个fload：left;，这样浏览器就可以获得自动高度。
方法二：你可以把高度设定和图片一样大小，也就是定死高度，（自然如果你的图片不确定大小，此方法不合适。）
方法三：可以借用js来私活西实现自动高度，这个我以前做过但代码现在没有了，你可以从网站上搜索一下。
浏览器不接容..DIV 都存在这个问题..
<!--[if !IE]>|xGv00|8958a32d98205d0a0f4611ccb55c6b13<![endif]-->
在后面加上这个看看
.nrtp{
width:680px;
padding:5px;
}
就可以了
绛旓細鏈缁忓吀鐨勪袱鍒鑷傚簲楂樺害CSS浠ｇ爜锛孖E5銆6銆7锛孎F涓嬫祴璇曢氳繃銆傚笇鏈涘浣犳湁鐢細body{ padding: 0;margin: 0;color:#333/*#0d7206*/;font-size: 14.7px;font-family: Arial, Helvetica, sans-serif;line-height: 140%;text-align: center;background:url(body_bg.jpg) #c8fdcc repeat-x top...
绛旓細杩欎釜鏂规硶灏卞ぇ鑷村垎涓轰袱绉嶅惂锛岀涓绉嶏紝鐢CSS鐨勬柟娉 绗簩绉嶏紝鐢↗S鏂规硶 杩欓噷鏆傛椂鍙紨绀虹涓绉嶏紝濡傛灉绗簩绉嶏紝鍙﹀@鎴 绀轰緥浠ｇ爜濡備笅锛欳SS浠ｇ爜绗竴绉嶅啓娉 html,body{height:100%; margin:0;}/**鎶奌TML鍜孊ODY鐨楂樺害璁剧疆鎴100%**/ div{height:100%; background-color:#ccc;}/**鎶婁綘DIV鐨勯珮搴﹁缃垚...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody {background: url(image123.jpg) no-repeat; background-size: cover;}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃跺浘鐗囨棦娌℃湁鍙樺舰灏辫兘瀹屾暣...
绛旓細<style>.div {display:flex; flex-direction:column; width:600px; height:600px; border:1px solid #ccc}.div1 {flex:0 0 auto; background-color:red}.div2 {flex:0 0 auto; background-color:green}.div3 {flex:1 1 auto; overflow:hidden; background-color:blue}</style><div ...
绛旓細涓嬮潰鏄吋瀹笽E6鐨勩侷E娴忚鍣ㄥ綋缁欓《DIV楂樺害鐨勬椂鍊欎笖鍐呭瓒呭嚭浜嗚楂樺害锛岄偅涔圖IV琚拺澶э紝鑰岀伀鐙愬拰璋锋瓕涓嶄細锛堝彲涓涓粰涓竟妗嗗氨鑳界湅鍑鸿秴鍑虹殑鏁堟灉浜嗭級銆傛墍浠ョ洿鎺ョ粰height IE绫绘祻瑙堝櫒鏄彲浠ョ殑銆備絾鏄伀鐙愪笉琛屻傚苟涓攎in-height杩欎釜鏍峰紡IE6涓嶈璇嗐傛墍浠ョ敤IE6HACK鍗砡height鍙湁IE6璁よ瘑銆傚綋瓒呭嚭鏃 涔閫傚簲锛屾病鏈...
绛旓細鐒跺悗鍙宠竟瑕侀殢鐫宸﹁竟鐨勫彉鍖栨潵閫傚簲锛屽綋鐒秄loat涔熻璁剧疆涓簂eft锛涳紙姝ゅ瑕佷繚璇佷綘鐨勫乏div鍜屽彸div鐨勫搴︿箣鍜屽垰濂芥槸鏈澶栧眰鐨刣iv鐨勫搴︼級鏈涓嬮潰鐨刣iv涔熻缃搴100%锛宖loat璁剧疆涓篵ottom鎴栬卨eft闅忎究锛楂樺害浣犺嚜宸辨寫鍚堥傜殑鍊煎氨濂戒簡銆傚叧閿湪浜巉loat鍜岃幏鍙栨洿鏀css鍊笺傝ˉ鍏呬竴涓嬶紝position鑳戒笉鐢ㄥ敖閲忓埆鐢╝bsolute ...
绛旓細7銆佸彲浠ョ湅鍒颁笉绠℃垜浠妸椤甸潰鍙樻垚浠涔堝昂瀵革紝DIV閮戒細鑷姩灞呬腑锛屾槸涓嶆槸瑙ｅ喅浣犵殑闂浜嗗憿锛熶互涓婂氨鏄疍W璁〥IV妯″潡鍦ㄩ〉闈腑鐩稿灞忓箷鑷姩灞呬腑鐨勬暀绋嬨俻鐩掑瓙鑷傚簲瀹藉害鎬庝箞淇濈暀鑳屾櫙棰滆壊锛熻缃儗鏅浘鐗囩殑澶у皬涓100%锛屽苟涓旇缃畁o-repeat css+p甯冨眬锛屽乏鍙充袱涓猵鎬庝箞鑳鑷姩閫傚簲楂樺害锛熷彲浠ラ氳繃js瀹炵幇涓や釜p鑷傚簲鍚岀瓑楂樺害锛...
绛旓細杩欐牱鍋氱殑濂藉鏄牱寮忓緢鐏垫椿锛屼慨鏀瑰瓙绾у唴瀹圭殑鏃跺欐病蹇呰鍐嶄慨鏀圭埗绾х殑楂樺害銆傚彟澶栧鏋滅埗绾ф病璁剧疆楂樺害锛屽唴閮ㄦ湁瀛愮骇娴姩鐨勬椂鍊欙紝浼氫娇瀛愮骇椤甸潰瓒呭嚭鐖剁骇锛岄渶瑕佺粰鐖剁骇鍔犱釜overflow:hidden灞炴э紝杩欐牱鐖剁骇鐨勯珮搴﹀悓鏍蜂篃浼氶殢瀛愮骇瀹瑰櫒鍙婂瓙绾у唴瀹圭殑楂樺害鑰鑷傚簲銆
绛旓細position:fixed bottom:0灏变細鍥哄畾鍦ㄦ渶搴曚笅
绛旓細height:10px;+padding:10px;=娴忚鍣ㄥ疄闄楂樺害30px锛変綘濡傛灉涓瀹氳鍔爌adding鐨勮瘽锛屽啀涓嶅奖鍝嶄綘鏁翠綋鏍峰紡鐨勬儏鍐典笅锛屼綘涓嶅Θ鍐嶅湪閲岄潰濂椾竴涓div骞惰瀹氶珮搴︼紝杩欐牱灏变笉浼氬洜涓簆adding灞炴ц屽鑷撮珮搴︿笉涓鑷寸殑闂 鑷充簬鍚炲悆鐜拌薄锛屼綘鍙互鍦ㄥ瓙绾т笂璁句竴涓竟妗哹order鏉ュ垎闅斿紑鐩搁偦鐨2涓猵adding锛岃繖鏍峰氨涓嶄細鍚炲悆鎺変簡 ...
