<!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" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>div仿框架布局之典型的两栏布局Version2.0（Private） - Powered by 飘零雾雨</title>
<meta name="Description" content="摆脱frameset的束缚，以div代替，通过css实现仿框架布局" />
<meta name="Keywords" content="div布局, div仿框架布局, 两栏布局" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<style type="text/css">
html,body{
overflow:hidden;
height:100%;
margin:0;
padding:0;
font:14px/1.8 Georgia, Arial, Simsun;
}
html{
_padding:110px 0;
}
#hd{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
background:#999;
}
#bd{
position:absolute;
top:110px;
right:0;
bottom:110px;
left:0;
overflow:hidden;
width:100%;
_height:100%;
}
#side{
position:absolute;
top:0;
left:0;
bottom:0;
overflow:auto;
width:200px;
_height:100%;
background:#666;
}
#main{
position:absolute;
_position:static;
top:0;
right:0;
bottom:0;
left:210px;
overflow:auto;
_overflow:hidden;
_height:100%;
_margin-left:210px;
background:#666;
}
#content{
_overflow:auto;
_width:100%;
_height:100%;
}
#ft{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100px;
background:#999;
}
/* 与布局无关，一些说明性内容样式 */
.tit-layout{margin:30px 0 0;font-size:18px;text-align:center;}
.copyright{font-weight:bold;text-align:center;}
#feature{width:200%;line-height:4;}
#feature .hd{padding:20px 15px;}
#feature .hd h2{margin:0;font-size:16px;}
#feature .bd ol{margin-top:0;}
#feature .bd h3{margin:0;padding:0 15px;font-size:14px;}
#feature .ft{padding:10px 15px 30px;}
</style>
</head>
<body>
<div >doyoe.com</a></address>
</div>
</body>
</html>
相关文章：