Как создать липкий нижний колонтитул в W3.CSS под прокручиваемой таблицей на адаптивной веб-странице? - PullRequest
Новая
       39

Как создать липкий нижний колонтитул в W3.CSS под прокручиваемой таблицей на адаптивной веб-странице?

0 голосов
/ 13 февраля 2019

Использование W3.CSS Я пытаюсь создать страницу, которая имеет 3 основных элемента, строку заголовка, прокручиваемую таблицу и нижний колонтитул.

Когда размер строки таблицы больше, чем можно отобразить вВ окне браузера пользователь должен иметь возможность прокручивать вниз, используя вертикальную полосу прокрутки, определенную в w3-контейнере таблицы.

Это необходимо для того, чтобы пользователь изменил размеры окна браузера и экранов разных размеров.Пользователь всегда должен видеть заголовок, прокручиваемую таблицу и нижний колонтитул.

Я пробовал различные сидячие решения для нижнего колонтитула, которые я нашел в Интернете, но не могу заставить их работать с w3-контейнером класса Iприлагаю мой столик внутри.

Есть предложения? 

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

1 Ответ

0 голосов
/ 13 февраля 2019

Вот решение с 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>
...