search

Seasons123 / blog-FE

web前端相关issue is my blog :lollipop:
2 stars 0 forks source link

任何分辨率下的全屏布局 #22

Open Seasons123 opened 7 years ago

Seasons123 commented 7 years ago 
<!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">
        *{ list-style:none; margin:0; padding:0;}
        html{ height:100%; overflow:hidden;}
        body{ background:red; height:100%;}
        .top,.left,.right,.bottom{ background:#000; position:absolute;}
        .top{ height:70px; left:10px; top:10px; right:10px;}
        .left{ width:300px; left:10px; top:90px; bottom:90px;}
        .right{ left:320px; right:10px; top:90px; bottom:90px;}
        .bottom{height:70px; left:10px; right:10px; bottom:10px;}
    </style>
    <!--[if IE 6]>
    <style type="text/css">
        html{ padding:90px 10px;}
        .top,.left,.right,.bottom{ position:relative; top:0; right:0; bottom:0; left:0;}
        .top{margin-top:-80px;}
        .left{height:100%;margin-top:10px; float:left;}
        .right{height:100%; margin:10px 0 0 320px;}
        .bottom{margin-top:10px;}
    </style>
    <![endif]-->

</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>>
</html>