网页布局常用的方法:单侧固定,另一侧适应充满

来源:互联网 发布:微软邮箱软件 编辑:程序博客网 时间:2024/06/04 01:11

 

<!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">
body
{
 margin:0;
 padding:0;
 word-wrap:break-word;
 background-color:#CCC;
}
.main
{
 margin:0px 50px 0px 50px;
 min-height:600px;
}


.left_nav
{
 float:left;
 position:absolute;
 margin-left:0px;
 width:300px;
 background-color:#F96;  
 min-height:600px;
 

.right_zone
{
 margin:0px 0px 0px  300px;
 min-height:600px;
 background-color:#69C; 
}
.main_2
{
 margin:0px;
 width:100%;
 min-height:600px;
 background-color:#C60;
}
</style>

</head>

<body>
<div class="main">
  <div class="left_nav">ddd
             
               
         </div>
 
         <div class="right_zone">
              <div class="main_2">
                <iframe width="100%" height="600" frameborder="0" src="frame_child.html" ></iframe>
              </div>
         </div>
     
        
</div>
</body>
</html>

0 0