日期:2014-05-17  浏览次数:20664 次

分享一个三行两列+全屏+DIV/CSS的布局
HTML code
 
<!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>
<title>首页 </title>
<style>
html
{
    background: #fff;
    font-size:80%;
    font-family:  Helvetica,Verdana ,新宋体, Sans-Serif;
    margin: 0;
    padding: 0;
    border:0;
    height:100%;
    max-height:100%;
    overflow:hidden;   
}
body
{
height:100%;
max-height:100%;
overflow:hidden;
background:#eee;
padding:0px;
margin:0px;
border:0px;
}
#header
{
    min-width:980px;
    position:absolute;
    margin:0;
    top:0;
    left:0;
    width:100%;
    height:56px;
    background:#e0e0e0;
    overflow:hidden;
    border:solid 1px red;
}
#info
{
height:40px;
background-color:#8f8f8f;
width:100%;
}

div#title
{
    text-align: left;
}
div#hbar
{
position:absolute;
left:182px;
top:0;
width:8px;
background:#e0e0e0;
border-right:solid 1px #e8e8e8;
height:100%;
}
div#bar
{
    height:11px;
    min-width:980px;
    width:100%;
    left:0px;
    position:absolute;
    bottom:0px;
}

#maincontainer
{
  position:absolute;
  top:58px;
  width:100%;
  bottom:20px;
  overflow:hidden;
  left:0px;
  background:#fff;
}
*html #maincontainer
{
top:0;
left:0;
height:100%;
max-height:100%;
width:100%;
position:absolute;
border-top:57px solid #fff;
border-bottom:20px solid #fff;
}

#leftcontainer
{
    width: 180px;
    top:0;
    left:0;
    height:100%;
    position:absolute;
    overflow:auto;
    border:solid 1px green;
    background-color:#eee;
   
}


#main
{
    width:auto;
    position:absolute;
    border:solid 1px black;
    height:100%;
    left:190px;
    right:0;
    overflow:auto;
    background-color: #fff;
}


#footer

  position:absolute;
  margin:0px;
  bottom:0;
  left:0;
  width:100%;
  height:18px;
  overflow:hidden;
  background:#eee;
  min-width:980px;
  color: #999;
  border-top:solid 1px #000;
}


</style>
</head>
<body>
          <div id="header">
            <div id="title"> </div>
            <div id="bar"> </div>
          </div>
        &