[JavaScript知识库] 自适应列表页的两种实现

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 自适应列表页的两种实现 -> 正文阅读

[JavaScript知识库]自适应列表页的两种实现

需求

　　如下图。其中表格部分：固定宽度，高度占满剩余空间

在这里插入图片描述

实现

flex 版本

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .header {
            background-color: #7fffd4;
            text-align: center;
        }

        .body-wrap {
            flex: 1;
            display: flex;

            /* 必要的，否则滚动条会依附在 html 元素上 */
            overflow-y: auto;
        }

        .body-left {
            /* display: flex;
            flex-direction: column; */
            background-color: #f58383;
        }

        .table-wrap {
            /* 必要的 height 属性 */
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .el-table {
            flex: 1;
        }

        .body-right {
            flex: 1;
            text-align: center;
            background-color: #a6f160;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <p>顶部盒子</p>
            <p>widht: 100%; 高度: 自适应;</p>
        </div>
        <div class="body-wrap">
            <div class="body-left">
                <div class="table-wrap">
                    <el-table :data="tableData" height="100%" style="width: 100%">
                        <el-table-column prop="date" label="日期" width="180"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                        <el-table-column prop="address" label="地址"></el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :total="1000">
                    </el-pagination>
                </div>
            </div>
            <div class="body-right">
                <p>右侧盒子</p>
                <p>width: 占满剩余宽度</p>
                <p>height: 占满剩余高度</p>
            </div>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const data = [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
    }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
    }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
    }];
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                tableData: [...data, ...data, ...data, ...data]
            }
        }
    })
</script>

</html>

注 1： 最外层高度占满剩余空间的容器（上例中的 div.left）必须设置 overflow-y: auto; 样式，否则滚动条不会依附在表格上，或出现双滚动条。

注 2： 当最外层高度占满剩余空间的容器不是列表的直接父容器时，需要为列表与其之间的容器设置 height 属性（如上例的 div.table-wrap）。

注 3： 如果容器中的列表不是 el-table，而是 ul>li 之类的，则可能稍有不同，可能需要在层层容器上设置 overflow-y: auto; 样式。

注 4： grid + flex 版本同样需要注意以上几点。

grid + flex 版本

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #app {
            display: grid;
            height: 100%;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto 1fr;
        }

        .header {
            grid-column-start: span 2;
            background-color: #7fffd4;
            text-align: center;
        }

        .left {
            /* 必须设置，否则滚动条会依附在 html 元素上 */
            overflow-y: auto;
            
            min-width: 150px;
            background-color: #f58383;

            /* 当 div.left 为 el-table 的直接父容器时 */
            /* display: flex;
            flex-direction: column; */
        }

        .table-wrap {
            /* 必须设置 height 属性，否则 el-table 无法固定表头 */
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .right {
            overflow-y: auto;
            text-align: center;
            background-color: #a6f160;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <p>顶部盒子</p>
            <p>widht: 100%; 高度: 自适应;</p>
        </div>
        <div class="left">
            <div class="table-wrap">
                <el-table :data="tableData" height="100%" style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
        <div class="right">
            <p>right-box</p>
            <p>height 占满剩余高度</p>
            <p>width 占满剩余宽度</p>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const data = [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
    }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
    }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
    }];
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                tableData: [...data, ...data, ...data, ...data]
            }
        }
    })
</script>

</html>