web開發中使用html/css全屏鋪開顯示

時間 2019-11-20

標籤 web 開發使用 html css 全屏鋪開顯示欄目 HTML 简体版

原文原文鏈接

儘管移動app是當下大熱，可是大勢已去。web開發將會持續發熱，對開發人員的要求也是愈來愈高，產品的各類需求咱們都得盡最大努力去實現，由於別無選擇。先上一張圖片吧，個你們先來個需求進而展開今天的話題javascript

dhtml

首先，咱們會想到的是經過計算高度來實現java

其次，咱們會想到用CSS3中退出的box，flex等佈局方式實現web

兩種方式各有利弊：chrome

先說第一種方式，這種方式我在14年的時候開始使用，後續也一直在用，不過如今不用了。固然瞭如今也有人一直使用這隻方式，個人感受只有一個，這種方式很容易想到。可是真的很麻煩，在各個瀏覽器下總有大夥考慮不到的東西，因此作起來仍是挺麻煩的，並不推薦。瀏覽器

第二種方式，這種方式首先一點是各個瀏覽器兼容的還不是很好，尤爲是IE老版本，爲何說我非得寫box和flex，很顯然這兩種方式結合起來使用基本可以解決全部問題。在各個瀏覽器下兼容的也還算不錯。後續會省掉好多問題。app

下面你們看看實現的效果圖：ide

樣式文件，基本沒有多餘的代碼，若是少了那一行，將在各個瀏覽器下出現問題佈局

* {
    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>