撑满屏布局

原创 李仁伟前端笔记 随笔 css3 284阅读 2018-06-05 10:18:24 举报

<!DOCTYPE html>
<html>
<html>

    <head>

    <title>height</title>

    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<style type="text/css">

    html,

body {
height:
100%;
margin:
0px;
padding:
0px;
}

main

{
background-color:

999;

height:

100%;
}

nav

{
background-color:

85d989;

width:

100%;
height:225px;
float:
left;
}

content

{
background-color:

cc85d9;

height:100%;

}

.neicont{
height:100%;
position: relative;
overflow-y: scroll;
}

.topbanner {
position: relative;
width: 100%;
height: 50px;
z-index: 100;
background: #398dee;
min-width: 956px;
}
.maincontainer {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
}
.viewport {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 520px;
z-index: 2;
}

.viewport .listdetail {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.list {
position: relative;
width:120px;
height: 100%;
border-right: 1px solid #e0e1e5;
background-color: #fff;
}
.list .listhd{
height: 60px;
line-height: 60px;
border-bottom: 1px solid #e0e1e5;
position: relative;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}

.list .listbd {
position: absolute;
top: 61px;
bottom: 30px;
left: 0px;
right: 0px;
overflow: hidden;
}
.widgetscrollerwrap {
overflow: hidden;
height: 100%;
width: 100%;
outline: none;
}
</style>

    </head>

    <body>

<div id="main">
<div class="topbanner">topbanner</div>
<div class="maincontainer">

    <div  class="viewport">  
        <div class="listdetail">
            <div class="list">
                <div class="listhd"></div>
                <div class="listbd">
                    <div class="widgetscrollerwrap" style="position:relative;">
                        <div>
                        <div style="overflow-y: scroll;height:100%;position:absolute;">
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                3333<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>

                                6548568<br>
                                6548568<br>
                                6548568<br>6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                6548568<br>
                                3333<br>
                                3333<br>
                                3333<br>
                                3333<br>
                                3333<br>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

</div>

    </body>

    </html>
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复