Question

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

当表的行大小大于浏览器窗口中显示的大小时，用户应该能够使用表的w3容器中定义的垂直滚动条向下滚动。

它可以应付用户调整浏览器窗口大小和各种屏幕尺寸的需求。用户应该始终能够看到页眉，可滚动表和页脚。

我尝试了各种在线找到的解决方案，但是无法将它们与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>

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，因为可能会有更好/更清晰的方法。

这是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的一种骇人听闻的方式：

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>

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

1 个答案: