寫頁面的時候經常遇到需要固定頂端和底部，中間內容自動撐開，超過屏幕大小可以自動滾動顯示。
實現很簡單，通過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屬性。
【參考】