div高度自适应

来源：互联网发布：sql 加列编辑：程序博客网时间：2024/05/18 00:53

关键点：

外框样式：

height:auto;

外框底部加入：

<div style="clear:both"></div>

内容框样式：

height:auto!important; height: 200px;min-height:200px;

其中，

height:auto!important; height: 200px;

是为了兼容ie6

下面放出全部代码及效果图

<!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 type="text/css">h1,p {margin:0px;padding:0px;}.head {background-color: #FF9;height: 130px;width: 960px;margin-right: auto;margin-left: auto;}.foot {background-color: #6CF;height: 120px;width: 960px;margin-right: auto;margin-left: auto;}.content {font-size: 16px;background-color: #FCF;width: 960px;margin-right: auto;margin-left: auto;height:auto;}.tmenu {background-color: #6FF;float: left;height: 180px;width: 260px;}.txt {background-color: #3F6;float: right;height:auto!important; height: 200px;min-height:200px;width: 680px;}</style></head><body><div class="head">头部</div><div class="content"><div class="tmenu">列表或菜单</div><div class="txt"><h1>内容啊</h1>  <p>　　天地玄黄 (tiān dì xuán huáng)，宇宙洪荒 (yǔ zhòu hóng huāng)。</p>  <p>　　日月盈昃 (rì yuè yíng zè)，辰宿列张 (chén xiù liè zhāng)。</p>  <p>　　寒来暑往 (hán lái shǔ wǎng)，秋收冬藏 (qiū shōu dōng cáng)。</p>  <p>　　闰馀成岁 (rùn yú chéng suì)， 律吕调阳 (lǜ lǚ tiáo yáng)。</p>  <p>　　云腾致雨 (yún téng zhì yǔ)， 露结为霜 (lù jié wéi shuāng)。</p>  <p>　　金生丽水 (jīn shēng lí shuǐ)， 玉出昆冈 (yù chū kūn gāng)。</p>  <p>　　剑号巨阙(jiàn hào jù què)， 珠称夜光 (zhū chēng yè guāng)。</p>  <p>　　果珍李柰 (guǒ zhēn lǐ nài)， 菜重芥姜 (cài zhòng jiè jiāng)。</p>  <p>　　海咸河淡 (hǎi xián hé dàn)， 鳞潜羽翔 (lín qián yǔ xiáng)。</p>  <p>　　龙师火帝 (lóng shī huǒ dì)， 鸟官人皇 (niǎo guān rén huáng)。</p>  <p>　　始制文字(shǐzhì wén zì )，乃服衣裳 (nǎi fú yī shāng)。</p>  <p>　　推位让国 (tuī wèi ràng guó)， 有虞陶唐 (yǒu yú táo táng)。</p>  <p>　　吊民伐罪 (diào mín fá zuì)， 周发殷汤 (zhōu fā yīn tāng)。</p>  <p>　　坐朝问道 (zuò cháo wèn dào)， 垂拱平章 (chuí gǒng pián zhāng)。</p>  <p>　　爱育黎首 (ài yù lí shǒu)， 臣伏戎羌 (chén fú róng qiāng)。</p>  <p>　　遐迩一体 (xiá ěr yī tǐ)， 率宾归王 (shuài bīn guī wáng)。</p>  <p>　　鸣凤在竹 (míng fèng zài zhú)， 白驹食场 (bái jū shí cháng)。</p>  <p>　　化被草木 (huà bèi cǎo mù)， 赖及万方 (lài jí wàn fāng)。</p></div><div style="clear:both"></div></div><div class="foot">页脚</div></body></html>

这是内容少的时候的显示

这是内容多的时候显示

附：在最新版firefox，oprea，safari，chrome，ie9测试通过，ietest上的ie6、7、8测试通过。