web开发中使用html/css全屏铺开显示

尽管移动app是当下大热，但是大势已去。web开发将会持续发热，对开发人员的要求也是越来越高，产品的各种需求我们都得尽最大努力去实现，因为别无选择。先上一张图片吧，个大家先来个需求进而展开今天的话题

d

 

首先，我们会想到的是通过计算高度来实现

其次，我们会想到用CSS3中退出的box，flex等布局方式实现

两种方式各有利弊：

先说第一种方式，这种方式我在14年的时候开始使用，后续也一直在用，不过现在不用了。当然了现在也有人一直使用这只方式，我的感觉只有一个，这种方式很容易想到。但是真的很麻烦，在各个浏览器下总有大伙考虑不到的东西，所以做起来还是挺麻烦的，并不推荐。

第二种方式，这种方式首先一点是各个浏览器兼容的还不是很好，尤其是IE老版本，为什么说我非得写box和flex，很显然这两种方式结合起来使用基本能够解决所有问题。在各个浏览器下兼容的也还算不错。后续会省掉好多问题。

下面大家看看实现的效果图：

 

样式文件，基本没有多余的代码，如果少了那一行，将在各个浏览器下出现问题

* {
    margin: 0;
    padding: 0;
}

html {
    max-height: 100%;
    min-height: 100%;
    height: 100%;
    _height: 100%;
    _max-height: 100%;
    overflow-y: hidden;
}

body {
    max-height: 100%;
    min-height: 100%;
    height: 100%;
    _height: 100%;
    _max-height: 100%;
    overflow-y: hidden;
}

.wrap {
    background: #EEE;
    margin: auto;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    _max-height: 100%;
    height: 100%;
    overflow-y: hidden;
}


.header {
    background-color: #999;
}

.pagefooter {
    position: relative;
}

.context-container {
    padding: 7px 20px;
    width: 100%;
    overflow-y: hidden;
}

.content {
}

.side {
    width: 500px;
    max-height: 100%;
    _max-height: 100%;
    background-color: #fefefe;
    overflow-y: hidden;
}

.left-content {
    overflow-y: hidden;
}

.box-flex {
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.box {
    /*盒子布局*/
    display: box; /* OLD - Android 4.4- */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.inline-box {
    /*盒子布局*/
    display: box; /* OLD - Android 4.4- */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-inline-flex; /* NEW - Chrome */
    display: inline-flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.box-row {
    /*排列方向*/
    /* 09版 */
    -webkit-box-orient: block-axis;
    /* 12版 */
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.box-column {
    /*排列方向*/
    /* 09版 */
    -webkit-box-orient: inline-axis;
    /* 12版 */
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}

.box-pack {
    /*对齐方式*/
    -webkit-box-pack: start;
    -moz-justify-content: start;
    -webkit-justify-content: start;
    justify-content: start;
}

.lh32 {
    height: 32px;
    line-height: 32px;
}

.left-content > li {
    /*盒子布局*/
    display: box; /* OLD - Android 4.4- */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-inline-flex; /* NEW - Chrome */
    display: inline-flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    /*排列方向*/
    /* 09版 */
    -webkit-box-orient: inline-axis;
    /* 12版 */
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    overflow-y: hidden;
}

    .left-content > li:last-child {
        border-bottom: 1px solid #999;
    }

    .left-content > li > a:link {
        /*手势*/
        cursor: pointer;
        background: #b8e6fa;
    }

    .left-content > li > a:visited {
        /*手势*/
        cursor: pointer;
        background: #b8e6fa;
    }

    .left-content > li > a:hover {
        /*手势*/
        cursor: pointer;
        background: #8ad1f5;
    }

    .left-content > li > a:active {
        /*手势*/
        cursor: pointer;
        background: #58d9f6;
    }

    .left-content > li > a {
        height: 32px;
        line-height: 32px;
        border-top: 1px solid #999;
        color: #2d2d2d;
        text-decoration: none;
        overflow-y: hidden;
    }

.backgroundcolor {
    background-color: #c3e6f8;
}

.left-content > li > div:last-child {
    display: none;
    overflow-y: auto;
}

/*元素不可选中*/
.left-content > li > a {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .left-content > li > a > span:not(:last-child) {
        margin-right: 10px;
    }

    .left-content > li > a > span:first-child {
        margin-left: 20px;
    }

    .left-content > li > a > span:nth-child(3) {
        line-height: 20px;
        padding: 0 5px;
        display: inline-block;
    }

.status-未发车 {
    background-color: #d8d8d8;
}

.status-运输中 {
    background-color: #4af18b;
}

.status-已到达 {
    background-color: #2196f3;
}

.left-header > div {
    display: block;
    width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #e4f5fa;
}

    .left-header > div > input {
        height: 24px;
    }

.left-header > h2 {
    background-color: #d8d8d8;
}

.left-header > div > * {
    line-height: 24px;
    display: inline-block;
}

.left-footer {
}

    .left-footer * {
        line-height: 24px;
    }

.clearfix {
    zoom: 1;
}

    .clearfix:before {
        content: "";
        display: table;
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .clearfix:after {
        content: "";
        clear: both;
        display: table;
        width: 0;
        height: 0;
        overflow: hidden;
    }

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>测试！</title>
    <meta name="keywords" content="">
    <meta name="description" content="" />
    <meta name="author" content="ddd" />
    
</head>
<body>
    <div class="wrap box box-column box-pack">
        <!--header-->
        <div class="header1">
            <div class="main-box">
                <div class="fl logo">
                    <a href="/Home/Index">
                        <img src="/Images/best/logo.png" />
                    </a>
                </div>

                <div class="fr head-r">
                    <div class="col-xs-4 app">

                        <div class="twocode" id="twocode" style="display: none;">
                            <em></em>
                            <div class="twocodePng clear">
                                <div class="fl">

                                </div>
                                <div class="fr w160">

                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-xs-8 refer">
                                           </div>
                </div>

            </div>
        </div>
        <!--header  END-->
       
<div class="context-container inline-box box-row box-flex box-pack">
    <div class="side inline-box box-column box-pack">
        <div class="left-header">
            <h2 class="lh32 pl20">
                口令查询
            </h2>
            <div class="pl20">
                <h3 class="mr10">查询口令</h3>
                <input id="passphraseCode" class="w80 mr20" type="text" />
                <h3 class="mr10">区域名称/编码</h3>
                <input id="areaCode" class="w80 mr20" type="text" />
                <a id="btnSearch" href="javascript:void(0);" class="btn btn-primary mr10" type="button" style="height: 24px;line-height: 21px;padding: 0 10px"><img src="/Images/login-new/search-btn.png" style="height:16px;width:16px;" /></a>
            </div>
        </div>

        <ul class="left-content inline-box box-column box-flex box-pack"><li class="box-flex">
                    <a>
                        <span>1</span>
                        <span>T201609293832</span>
                        <span>运输中</span>
                        <span>
                            <em>
                                <img src="~/Images/c_icon2.png" style="height:16px;width:16px;" />
                            </em>陕A28334
                        </span>
                        <span>
                            <em>
                                <img src="~/Images/c_icon1.png" style="height:16px;width:16px;" />
                            </em>张师傅 155534333
                        </span>
                    </a>
                    <div class="box-flex">
                        <p style="line-height:30px;">节点1</p>
                        <p style="line-height:30px;">节点2</p>
                        <p style="line-height:30px;">节点3</p>
                        <p style="line-height:30px;">节点4</p>
                        <p style="line-height:30px;">节点5</p>
                        <p style="line-height:30px;">节点6</p>
                        <p style="line-height:30px;">节点7</p>
                        <p style="line-height:30px;">节点8</p>
                        <p style="line-height:30px;">节点9</p>
                        <p style="line-height:30px;">节点10</p>
                        <p style="line-height:30px;">节点11</p>
                        <p style="line-height:30px;">节点12</p>
                        <p style="line-height:30px;">节点13</p>
                        <p style="line-height:30px;">节点14</p>
                        <p style="line-height:30px;">节点15</p>
                        <p style="line-height:30px;">节点16</p>
                        <p style="line-height:30px;">节点17</p>
                        <p style="line-height:30px;">节点18</p>
                        <p style="line-height:30px;">节点19</p>
                        <p style="line-height:30px;">节点20</p>
                        <p style="line-height:30px;">节点21</p>
                        <p style="line-height:30px;">节点22</p>
                    </div>
                </li></ul>

        <div class="left-footer pl20">
            <span id="countInfo" style="">共--条</span>
            <div style="float:right;margin-right:10px;">
                <a id="prevPage" value="1" style="cursor:pointer;">
                    <img src="/Images/Query/icon_prev.png" />
                </a>
                <a id="nextPage" value="1" style="cursor:pointer;">
                    <img src="/Images/Query/icon_next.png" />
                </a>
            </div>
        </div>
    </div>
    <div id="mapLayout" class="content box-flex">

    </div>
</div>


        <!--main  END-->
        <!--footer-->
        <div class="footer  pagefooter" id="footerdiv">
            <div class="footer2">

            </div>
        </div>
        <!--footer  END-->
    </div>
</body>
</html>

这下基本就可以了。