html - 如何在响应式网页的可滚动表格下方的 W3.CSS 中创建粘性页脚？
问题描述
使用 W3.CSS 我正在尝试创建一个包含 3 个主要元素、标题行、可滚动表格和页脚的页面。
当表格行大小大于浏览器窗口中可以显示的大小时，用户应该能够使用表格的 w3-container 中定义的垂直滚动条向下滚动。
它需要应对用户调整浏览器窗口的大小和各种屏幕尺寸。用户应该始终能够看到页眉、可滚动表格和页脚。
我已经尝试了各种我在网上找到的 Sitcky 页脚解决方案，但无法让它们与我将桌子附在其中的 w3-container 类一起使用。
有什么建议么 ？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script>
</script>
<style>
</style>
</head>
<body class="w3-light-grey">
<div class="w3-row-padding">
<div class="w3-col" style="width:50%"><p>A value</p></div>
<div class="w3-col" style="width:50%"><p>Another value</p></div>
</div>
<div class="w3-row-padding">
<div class="w3-col" style="width:100%">
<div class="w3-container w3-padding-8" style="overflow-y:scroll">
<h5>Records</h5>
<table id="dataTable" border="0" class="w3-table-all w3-card-4">
<tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
<tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
</table>
</div>
</div>
</div>
<div class="w3-row-padding">
<p>Footer</p>
</div>
</body>
</html>
解决方案
这是一个解决方案grid：
body {
display: grid;
grid-template-rows: auto 1fr auto;
/* you may want to set `height` of `html` and `body` to `100%` instead of this
https://developers.google.com/web/updates/2016/12/url-bar-resizing */
height: 100vh;
}
.header > .w3-col {
width: 50%;
}
.table-container {
min-height: 0;
}
.table-container > .w3-col, .table-container .w3-container {
height: 100%;
}
.table-container .w3-container {
overflow-y: scroll;
}
#dataTable {
border: 0;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">
<div class="w3-row-padding header">
<div class="w3-col"><p>A value</p></div>
<div class="w3-col"><p>Another value</p></div>
</div>
<div class="w3-row-padding table-container">
<div class="w3-col">
<div class="w3-container w3-padding-8">
<h5>Records</h5>
<table id="dataTable" class="w3-table-all w3-card-4">
<tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
<tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
</table>
</div>
</div>
</div>
<div class="w3-row-padding footer">
<p>Footer</p>
</div>
</body>
</html>我没有太多的知识grid，所以如果你要使用这个解决方案，我会鼓励你研究grid，因为可能有更好/更清晰的方法。
这是一个 Flexbox 解决方案：
body {
display: flex;
flex-direction: column;
/* you may want to set `height` of `html` and `body` to `100%` instead of this
https://developers.google.com/web/updates/2016/12/url-bar-resizing */
height: 100vh;
}
.header, .footer {
flex: none;
}
.header > .w3-col {
width: 50%;
}
.table-container {
flex: auto;
min-height: 0;
}
.table-container > .w3-col, .table-container .w3-container {
height: 100%;
}
.table-container .w3-container {
overflow-y: scroll;
}
#dataTable {
border: 0;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">
<div class="w3-row-padding header">
<div class="w3-col"><p>A value</p></div>
<div class="w3-col"><p>Another value</p></div>
</div>
<div class="w3-row-padding table-container">
<div class="w3-col">
<div class="w3-container w3-padding-8">
<h5>Records</h5>
<table id="dataTable" class="w3-table-all w3-card-4">
<tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
<tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
</table>
</div>
</div>
</div>
<div class="w3-row-padding footer">
<p>Footer</p>
</div>
</body>
</html>这是一种 hacky 方式calc：
body {
/* you may want to set `height` of `html` and `body` to `100%` instead of this
https://developers.google.com/web/updates/2016/12/url-bar-resizing */
height: 100vh;
}
.header > .w3-col {
width: 50%;
}
.table-container {
/* values taken from browser's inspector */
--header-height: 52.5px;
--footer-height: 52.5px;
height: calc(100% - var(--header-height) - var(--footer-height));
}
.table-container > .w3-col, .table-container .w3-container {
height: 100%;
}
.table-container .w3-container {
overflow-y: scroll;
}
#dataTable {
border: 0;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Responsive Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">
<div class="w3-row-padding header">
<div class="w3-col"><p>A value</p></div>
<div class="w3-col"><p>Another value</p></div>
</div>
<div class="w3-row-padding table-container">
<div class="w3-col">
<div class="w3-container w3-padding-8">
<h5>Records</h5>
<table id="dataTable" class="w3-table-all w3-card-4">
<tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
<tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
<tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
</table>
</div>
</div>
</div>
<div class="w3-row-padding footer">
<p>Footer</p>
</div>
</body>
</html>推荐阅读
- swift - 我们如何通知 ObservableObject 其初始值设定项的更改？
- powershell - 如何使用 .csv 数据修改多个文件的日期创建属性？
- javascript - 从 React Native 中的 Navigation Stack 显示屏幕时调用哪个方法
- javascript - 允许在第二次检查时将单选字段设置为可取消检查
- java - 使用 dfs 和 Map 对二叉树进行垂直顺序遍历
- swift - 在 OperationQueue 中打印 1 到 10 不打印整数
- php - 如何从目标字符串中的源字符串中查找任何单词并从 PHP 中的目标字符串中删除所有匹配的单词
- listview - 如何从 Syncfusion 列表视图中获取可见项目？
- python - 即使在向数据框中添加一列后，我的形状仍然保持不变，这意味着我无法向我的数据框添加一列
- reactjs - 我正在尝试设置 jsconfig.json 但我收到此错误