body css 满屏效果 

@mixin fullScreen{
    position: fixed;
    top: 0;
    bottom: 0;
}
@mixin fullScreen2{
    position: absolute;
    width: 100%;
    height: 100%;
}

 

html{
    height: 100%;
}

body{
    height: 100%;
}

　　

<!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>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html {
        padding: 0;
        /* firefox for IE 7.0 */
        _padding: 100px 0 0 200px;
        /*IE 6.0*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        height: 100%;
        overflow: hidden;
    }

    #left {
        position: absolute;
        top: 0;
        left: 0;
        overflow: auto;
        _padding-bottom: 100px;
        width: 200px;
        height: 100%;
        background: #eee;
        text-align: center;
        line-height: 1000px;
    }

    #header {
        position: absolute;
        top: 0;
        left: 200px;
        /* width:auto; 针对firefox 3.5.2版本*/
        width: 100%;
        height: 100px;
        background: #ccc;
        line-height: 100px;
        text-align: center;
    }

    #middle {
        position: absolute;
        _position: relative;
        top: 100px;
        _top: 0;
        right: 0;
        bottom: 0;
        left: 200px;
        _left: 0;
        overflow: auto;
        height: auto;
        _height: 100%;
        background: #ffc;
        text-align: center;
        line-height: 800px;
    }
</style>

<body>
    <div id="left">left</div>
    <div id="header">header</div>
    <div id="middle">middle</div>
</body>

</html><br />
<center>如不能显示效果，请按Ctrl+F5刷新本页</center>
View Code

 

table{
    background-color: red;
    height: 100%;
    width: 100%;
}

 

posted @ 2017-09-03 13:27  Jason502  阅读(940)  评论(0)  编辑  收藏  举报