首页 >> 网页设计 >> CSS/HTML专区 >> DIV+CSS高度自适应网页代码实例

DIV+CSS高度自适应网页代码实例

时间:2008-9-20 网友评论条【大中小】

我今天晚上，做一个快印公司的网站布局，在Div镶套布局中，父标签DIV的高度不变。在IE下没有问题，但是在FIREFOX下就有问题了。

如图：

代码：

<!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>高度自适应 - 中国asp之家</title> </head> <body> <div style="width:300px;border:#FF0000 solid 1px;"> <div style="width:200px; float:left; position:relative;border:#000000 solid 1px; clear:left"> <p>此处显示</p> <p>新 Div 标签的</p> <p>内容</p> </div> <div style="width:80px; float:left; position:relative;border:#0000CC solid 1px; clear:right">此处显示新 Div 标签的内容</div> </div> </body> </html> [提示：你可先修改部分代码，再按运行]

在网上搜索一下发现有同样问题的人还挺多，给的方法也很多，有用JS的，有用HEIGHT=100%的，我感觉都没有作用。

我在下面加了一个
<div style="clear:both"></div>

加完后代码是：

<!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>高度自适应 - 中国asp之家</title> </head> <body> <div style="width:300px;border:#FF0000 solid 1px;"> <div style="width:200px; float:left; position:relative;border:#000000 solid 1px; clear:left"> <p>此处显示</p> <p>新 Div 标签的</p> <p>内容</p> </div> <div style="width:80px; float:left; position:relative;border:#0000CC solid 1px; clear:right">此处显示新 Div 标签的内容</div> <div style="clear:both"></div> </div> </body> </html> [提示：你可先修改部分代码，再按运行]

这样就可以解决问题了。

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/design/css/20089/479220.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

闽ICP备06017341号

DIV+CSS高度自适应网页代码实例

Aspxhome.com. 中国Asp之家. 版权所有