CSS布局中自适应高度的解决方法

作者:龙犊整理

来源:天极

热度:

2006-10-23 13:09:14

这是div+css布局中经常会碰到的基础问题，个人觉得采用背景图填充的方法，还是比较简单和切实可行的。最终效果。

　　CSS源代码:

以下是引用片段：
　　body{
　　background: #EDEDED;
　　font-size: 70%;
　　font-family: Arial, Helvetica, sans-serif;
　　line-height: 130%;
　　color: #666666;
　　margin: 0;
　　padding: 0;
　　text-align: center;
　　}
　　#layout{
　　width: 760px;/*--for ie5.x--*/
　　w\idth: 740px;/*--other--*/
　　margin: 10px auto;
　　border: solid 10px #999999;
　　border-bottom: solid 9px #999999;
　　/*--底部要加个1px的DIV来清除浮动，所以把
　　底边框设为9px--*/
　　background: url(bg.gif) #FFFFFF repeat-y left;
　　/*--背景填充，解决左右栏高度不一致--*/
　　text-align: left;
　　}
　　#sidel{
　　float: left;
　　width: 190px;
　　}
　　#sider{
　　float: right;
　　width: 540px;
　　}
　　pre{
　　padding: 10px;
　　margin: 0;
　　}
　　.clear{
　　background: #999999;
　　clear: both;
　　height: 1px;
　　overflow: hidden;
　　}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
	<title>DIV+CSS排版中自适应高度的解决方法</title>
	<style type="text/css">
	
	</style>
</head>

<body>
<div id="layout"><div id="sider"><pre>
	body{
		background: #EDEDED;
		font-size: 70%;
		font-family: Arial, Helvetica, sans-serif;
		line-height: 130%;
		color: #666666;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
	#layout{
		width: 760px;
		w\idth: 740px;
		margin: 10px auto;
		border: solid 10px #999999;
		border-bottom: solid 9px #999999;
		background: url(bg.gif) #FFFFFF repeat-y left;
		text-align: left;
	}
	
	#sidel{
		float: left;
		width: 190px;
	}
	
	#sider{
		float: right;
		width: 540px;
	}
	
	pre{
		padding: 10px;
		margin: 0;
	}
	
	.clear{
		background: #999999;
		clear: both;
		height: 1px;
		overflow: hidden;
	}</pre></div><div id="sidel"><pre>
#sidel{
float: left;
width: 190px;
}
	
#sider{
float: right;
width: 540px;
}
	
pre{
padding: 10px;
margin: 0;
}
	
.clear{
background: #999999;
clear: both;
height: 1px;
overflow: hidden;
}</pre></div>
<div class="clear"></div>
</div>
<a href="http://homepage.yesky.com">返回网页陶吧</a>
</body>
</html>

我来说两句：

查看评论