php实战第十七天_PHP教程

今天学习到了一个非常神奇的css布局方法

position: absolute;
top:61px;
bottom: 0px;

把 position设置为 absolute 后 top就是顶边拉 left就是左边拉

那么如果把 底边调成0.嘿嘿,是不是变成窗口自适应了?

做这个的时候想过 直接设置 height:100%.但是这是无效帝,,,具体为什么我也不知道哈...

[css]
#head{ 
    width:100%; 
    height:61px; 
     
    border-bottom:solid 1px #ccc; 
 
    background-image:url(../img/topbg.gif); 
    background-repeat:repeat-x; 
    } 
#logo{ 
    width:189px; 
    height:61px; 
    background-image:url(../img/logo_dmin.png); 
    } 
#left{ 
    padding-top:15px; 
    width:205px; 
    height:auto; 
    overflow-y:auto; 
    background-image: url(../img/leftbg.gif); 
 
    position: absolute; 
    top:61px; 
    bottom: 0px; 
    } 
#left h4{ 
    margin-left:18px; 
    background-image:url(../img/menuf.gif); 
    height: 20px; 
    width: 160px; 
    font-size: 12px; 
    text-align: center; 
    line-height:20px; 
    //font-weight:normal; 
} 
#left li{ 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left:36px; 
    cursor: pointer; 
    color:#555; 
    font-size: 12px; 
} 
 
#right{ 
    overflow-y:auto; 
    position: absolute; 
    top:61px; 
    left: 205px; 
    bottom:0px; 
    right:0px; 
    } 

#head{
 width:100%;
 height:61px;
 
 border-bottom:solid 1px #ccc;

 background-image:url(../img/topbg.gif);
 background-repeat:repeat-x;
 }
#logo{
 width:189px;
 height:61px;
 background-image:url(../img/logo_dmin.png);
 }
#left{
 padding-top:15px;
 width:205px;
 height:auto;
 overflow-y:auto;
 background-image: url(../img/leftbg.gif);

 position: absolute;
 top:61px;
 bottom: 0px;
 }
#left h4{
 margin-left:18px;
 background-image:url(../img/menuf.gif);
 height: 20px;
 width: 160px;
 font-size: 12px;
 text-align: center;
 line-height:20px;
 //font-weight:normal;
}
#left li{
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left:36px;
 cursor: pointer;
 color:#555;
 font-size: 12px;
}

#right{
 overflow-y:auto;
 position: absolute;
 top:61px;
 left: 205px;
 bottom:0px;
 right:0px;
 }html的代码为

[html]