div高度自适应

最新推荐文章于 2021-04-01 14:28:05 发布

生活在他方

最新推荐文章于 2021-04-01 14:28:05 发布

阅读量1k

点赞数

分类专栏：前台开发资料

本文链接：https://blog.csdn.net/wuyt2008/article/details/8191187

版权

前台开发资料专栏收录该内容

29 篇文章 0 订阅

订阅专栏

关键点：

外框样式：

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>

这是内容少的时候的显示