css两列布局未知高度设置背景色

作者:divcss教程吧      点击次数:887次     发布日期:2014-09-21

css两列布局未知高度设置背景色

在网站内容页经常的呈现方式就是一个两列的布局。如果在不设置高度的情况下,想设置背景颜色会不会可行呢。

就像我们下面这个图:

css两列布局未知高度设置背景色

 

代码如下:

<!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">
*{margin:0px;padding:0px;background:#999;}
#main,#footer{width:950px;margin:0px auto;}
#main{background:#fff;}
#main .left{width:200px;float:left;background:#fff;}
#main .right{width:750px;float:left;background:#fff;}
.clear{clear:both;}
#footer{background:#ccc;}
</style>
</head>

<body>
<div id="main">
<div class="left">左侧导航</div>
<div class="right">www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
</div>

</div>
<div id="footer" class="clear">底部</div>
</body>
</html>

那么碰见这个问题该如何解决呢。

其实碰见这个问题我们可以通过设置css overflow样式去解决,大家可以看如下代码:

<!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">
*{margin:0px;padding:0px;background:#999;}
#main,#footer{width:950px;margin:0px auto;}
#main{background:#fff;overflow:hidden;}
#main .left{width:200px;float:left;background:#fff;}
#main .right{width:750px;float:left;background:#fff;}
.clear{clear:both;}
#footer{background:#ccc;}
</style>
</head>

<body>
<div id="main">
<div class="left">左侧导航</div>
<div class="right">www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
www.divcss8.com右侧内容<br/>www.divcss8.com右侧内容<br/>
</div>
</div>
<div id="footer" class="clear">底部</div>
</body>
</html>

是不是解决了呢。

分享DIVCSS8