【CSS】固定顶部和底部，中间部分滚动展示

最新推荐文章于 2024-04-18 11:08:14 发布

爱吃香草冰淇淋的阿喵

最新推荐文章于 2024-04-18 11:08:14 发布

阅读量5k

点赞数

分类专栏： projects 文章标签： css

本文链接：https://blog.youkuaiyun.com/coralime/article/details/104747754

版权

projects 专栏收录该内容

11 篇文章

订阅专栏

写页面的时候经常遇到需要固定顶端和底部，中间内容自动撑开，超过屏幕大小可以自动滚动显示。

实现很简单，通过flex布局固定顶端和底部的高度，中间内容自动撑开，可以解决。

【CSS】

  <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        .wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            /*布局方向是垂直的*/
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .header {
            height: 35px;
            /*line-height: 140px;*/
            background-color: papayawhip;
            text-align: center;
        }

        .footer {
            height: 20px;
            /*line-height: 140px;*/
            background-color: papayawhip;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        /* 设置高度是跟父元素的高度一致，100% */
        /* 实际高度是100% 减去顶部高度和底部高度，左右两边固定，中间是剩余100%原理一致*/
        .main {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            overflow: auto;
            background-color: pink;
        }
    </style>

【demo】

这里用Datatables插件写了一个表格的demo，顶端是一个标签，底端有一个footer，可以写一些注脚，中间是可以左后滑动的表格，当表格内容超过屏幕大小可以自动滚动显示，显示的区域不超过中间屏幕可视区域。

#->header: 35px

#->footer: 20px

注意表格的高度设定还需要减掉表格表头的高度：30px

最后表格的动态高度=100vh - 35px - 20px - 30px = 100vh - 85px

  scrollY: "calc(100vh - 85px)",  //智能计算高度

【页面代码】

#1-> <header></header>

<head>
    <!--控制页面自动适应屏幕大小-->
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>顶端底部固定中间撑开</title>
    <link rel="shortcut icon" href="#">

    <!--DataTable CSS-->
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="css/fixedColumns.dataTables.min.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!--JQuery-->
    <script type="text/javascript" charset="UTF-8" src="scripts/jquery-3.3.1.js"></script>
    <!--DataTable-->
    <script type="text/javascript" charset="UTF-8" src="scripts/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="scripts/dataTables.fixedColumns.min.js"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        .wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            /*布局方向是垂直的*/
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .header {
            height: 35px;
            /*line-height: 140px;*/
            background-color: papayawhip;
            text-align: center;
        }

        .footer {
            height: 20px;
            /*line-height: 140px;*/
            background-color: papayawhip;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        /* 设置高度是跟父元素的高度一致，100% */
        /* 实际高度是100% 减去顶部高度和底部高度，左右两边固定，中间是剩余100%原理一致*/
        .main {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            overflow: auto;
            background-color: pink;
        }
    </style>

    <script type="text/javascript">
        //当页面开始加载的时候进行一系列初始化工作
        window.onload = function () {
            //查询表格数据
            getTableData();
        }
    </script>

</head>

#2-> <body></body>

<div class="wrap">

    <div class="header">
        <div class="controlDiv">
            <h1 class="css_label">我是一个俏皮的表格</h1>
        </div>
    </div>

    <div class="main">
        <table class="cell-border compact stripe" id="tableframe" style="width:100%">
            <thead>
            <tr>
                <th>序号</th>

                <th>机构号</th>
                <th>机构名</th>
                <th>机构等级</th>

                <th>机构号1</th>
                <th>机构名1</th>
                <th>机构等级1</th>

                <th>机构号2</th>
                <th>机构名2</th>
                <th>机构等级2</th>

                <th>机构号3</th>
                <th>机构名3</th>
                <th>机构等级3</th>

                <th>机构号4</th>
                <th>机构名4</th>
                <th>机构等级4</th>
            </tr>

            </thead>
        </table>

    </div>
    <div class="footer">
        <p style="margin: 0 auto">我是一个footer</p>
    </div>
</div>

#3-> <script></script>

<script type="text/javascript">

    function getTableData() {

        $.ajax({
            data: {
                date: "2020-03-09" //填写要传递到Servlet的参数
            },
            type: "post",
            url: "BranchOfficesServlet",
            dataType: "json",
            beforeSend: function () {
                //隐藏表格主体
                $("tbody").hide();
                $("tfoot").hide();
            },
            success: function (dataArray) {
                drawTable(dataArray);
            },
            error: function (e) {
                hiddenLoad();
                alert("ajax发生错误！" + e.status);
            },
            complete: function () {
                //显示表格主体
                $("tbody").show();
                $("tfoot").show();

                //重新绘制排名的12345...
                var t = $("#tableframe").DataTable();
                t.on('order.dt search.dt', function () {
                    t.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }).draw();
            }
        });
    }

    function drawTable(dataArray) {

        var columns = [
            {"data": "序号"},
            {"data": "branch_no"},
            {"data": "branch_name"},
            {"data": "branch_class"},

            {"data": "branch_no"},
            {"data": "branch_name"},
            {"data": "branch_class"},

            {"data": "branch_no"},
            {"data": "branch_name"},
            {"data": "branch_class"},

            {"data": "branch_no"},
            {"data": "branch_name"},
            {"data": "branch_class"},

            {"data": "branch_no"},
            {"data": "branch_name"},
            {"data": "branch_class"}
        ];


        $("#tableframe").DataTable({
            "columnDefs": [
                {
                    //列不可查询、不可排序
                    "searchable": false,
                    "orderable": false,
                    "targets": [0]
                },
                {
                    //设置默认值
                    "defaultContent": "",
                    "targets": "_all"
                }
            ],

            "info": false,
            "order": [[1, "desc"]], //默认按【branch_no】从高到低排序
            "language": {
                "zeroRecords": "抱歉，无数据，请重新查询！",
                "lengthMenu": "每页显示_MENU_条",
                "paginate": {
                    "next": "下一页",
                    "previous": "上一页"
                },
                "info": "总共_TOTAL_条数据，目前显示的是第_START_到_END_条",
                "thousands": ","
            },
            "searching": false,
            "destroy": true,

            // scrollX: false,
            scrollX: true,
            //固定左边两栏不滑动
            fixedColumns: {
                leftColumns: 2
            },

            scrollY: "calc(100vh - 85px)",  //智能计算高度
            scrollCollapse: true,
            paging: false,

            "data": dataArray.BodyData,
            "columns": columns
        });
    }

</script>

【运行效果】

随意更改屏幕大小，顶部和底部固定不变，中间内容随屏幕大小自动占满显示，彻底解决因手机屏幕大小不同造成表格的不完全显示，同时表格除了垂直滚动以外还能左右滑动显示，这是依赖于DataTable本身的fiexdColumns属性。