如何在响应式网页的可滚动 table 下方的 W3.CSS 中创建粘性页脚？

Question

使用 W3.CSS 我正在尝试创建一个包含 3 个主要元素的页面，一个 header 行，一个可滚动 table 和一个页脚。

当 table 行大小大于可以在浏览器中显示时 window 用户应该能够使用 table 中定义的垂直滚动条向下滚动s w3-容器。

它需要应对用户调整浏览器大小 window 和各种屏幕尺寸。用户应该始终能够看到 header、可滚动 table 和页脚。

我尝试了在网上找到的各种 sitcky 页脚解决方案，但无法让它们与 w3 容器一起工作class我将我的 table 包含在其中。

有什么建议吗？

<!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>

Answer 1

这是 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，因为可能有 better/clearer 方法.

这是一个 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>

这是 calc 的 hacky 方法：

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>

如何在响应式网页的可滚动 table 下方的 W3.CSS 中创建粘性页脚？

How do you create a sticky footer in W3.CSS below a scrollable table in a responsive web page?

html

w3.css