DIV+CSS 设计的页面，DIV高度自适应问题

最新推荐文章于 2022-09-20 10:42:32 发布

wangxiaohui6687

最新推荐文章于 2022-09-20 10:42:32 发布

阅读量2.3k

点赞数

分类专栏： css技术文章标签： div css xhtml html xml ie

本文链接：https://blog.csdn.net/wangxiaohui6687/article/details/7326608

版权

css技术专栏收录该内容

83 篇文章 0 订阅

订阅专栏

解决方法：方法1：在内层元素的最后面加入一个元素，并且设置这个元素不浮动，强制使外层元素包裹内层元素如<div style="clear:both;float:none"></div> 方法2：设置外层元素css属性overfloat为hidden或者auto，zoom设置为1，设置zoom是为了兼容ie6

方法4：.clearFix:after

方法3：设置外层元素高度为一个固定值，这个一般不采取使用。

例子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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
		#main{background:#ccc;zoom:1;}/*专业对付IE6/7*/
		#left{width:100px;height:100px;background:red;float:left;}
		#right{width:200px;height:200px;background:green;float:right;}
		#footer{width:50px;height:50px;background:blue;clear:both;}
		.clear{clear:both;}/*给空标签，设置清除两者浮动，使父元素的高度自适应子元素高度*/
	</style>
</head>
<body>
	<div id="main">
		<div id="left">左浮动元素</div>

		<div id="right">右浮动元素</div>
		<div class="clear"></div>
	</div>
	<div id="footer">底部元素</div>
</body>
</html>

例子2：

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
		#main{background:#ccc;border:1px solid #000;overflow:hidden;zoom:1;}
		#left{width:100px;height:100px;background:red;float:left;}
		#right{width:200px;height:200px;background:green;float:right;}
		#footer{height:50px;background:blue;}
	</style>
</head>
<body>
	<div id="main">
		<div id="left">左浮动元素</div>

		<div id="right">右浮动元素</div>
	</div>
	<div id="footer">底部元素</div>
</body>
</html>

例子4：

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
  .clearFix:after{
   clear:both;
   display:block;
   visibility:hidden;
   height:0;
   line-height:0;
   content:"";
  }
  .clearFix{zoom:1;}/*针对IE6/7*/
  #main,#footer{width:800px;margin:0 auto;}
  #main{background:#ccc;border:1px solid #000;position:relative;}
  #left{width:100px;height:100px;background:red;position:absolute;left:-50px;top:50px;}
  #right{width:200px;height:200px;background:green;float:right;}
  #footer{height:50px;background:blue;}
</style>
</head>
<body>
<div id="main" class="clearFix">
  <div id="left">左浮动元素</div>
  <div id="right">右浮动元素</div>
</div>
<div id="footer">底部元素</div>
</body>
</html>

wangxiaohui6687

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS 设计的页面，DIV高度自适应问题

解决方法：方法1：在内层元素的最后面加入一个元素，并且设置这个元素不浮动，强制使外层元素包裹内层元素如方法2：设置外层元素css属性overfloat为hidden或者auto，zoom设置为1，设置zoom是为了兼容ie6方法4：.clearFix:after方法3：设置外层元素高度为一个固定值，这个一般不采取使用。例子1： #main{
复制链接

扫一扫

专栏目录