Как сделать так, чтобы высота стола соответствовала размеру экрана?
Я создаю таблицу в HTML и CSS, у которой есть собственные полосы прокрутки (в отличие от полос прокрутки страницы).
<div class = "results">
<table>
<thead>
<tr>
<th>Header</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
</tbody>
</table>
</div>
body {
overflow: hidden;
}
.results {
overflow: auto;
height: 600px;
}
Это достигает того, что я хочу, но только на моем экране. Если я посмотрю на эту таблицу на другом экране или в другом разрешении, то нижняя полоса прокрутки окажется в другом положении. Как сделать так, чтобы нижняя полоса прокрутки всегда находилась внизу экрана? Вместо этого я попытался сделать это с процентами, и нижняя полоса вообще не появляется. Я также пробовал делать vh вместо px, но это делает то же самое. Я не могу понять, как убедиться, что нижняя полоса прокрутки всегда будет внизу экрана. Кажется, мне нужно явно установить высоту, чтобы у таблицы были свои собственные полосы прокрутки.
Я также пытался установить высоту на auto, но из-за этого я вообще не могу прокручивать. Похоже, что высота должна быть определенным значением.
Использование vh намного лучше, чем использование px, но нижняя полоса по-прежнему не всегда появляется внизу.
Я думаю, что vh это единица, которую вы ищете
Небольшая ошибка в моем вопросе. Я имел в виду vh, и это делает то же самое, что и px (где положение отличается в зависимости от размера экрана).
Я также попробовал исправить положение, и полосы прокрутки вообще не появляются.
Попробуйте высоту: 100vh; к столу
Вы имеете в виду использовать высоту 100vh в селекторе таблицы? Я попробовал это на div результатов, а также на селекторе таблиц, и ни один из них не работал (он все еще меняет позиции).
Кажется, что над таблицей есть контент, поэтому это сложно сделать с помощью css. Существует множество различных соотношений сторон экрана. Также браузер можно изменять в любом размере (ширине и высоте). Я думаю, что это должно быть сделано с помощью javascript.
Ответы 2
Если речь идет о горизонтальной полосе прокрутки внизу, вы можете использовать этот css. Здесь я использую flexbox вместо старого tablebox для большей гибкости.
.results {
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.results * {
box-sizing: border-box;
margin: 0;
}
.results table {
display: flex;
flex-wrap: wrap;
position: relative;
border-collapse: collapse;
background-color: transparent;
}
.results thead, .results tbody {
display: block;
flex: 0 0 100%;
width: 100%;
max-width: 100%;
position: relative;
}
.results tr {
display: flex;
flex-wrap: nowrap;
position: relative;
}
.results th, .results td {
display: block;
width: 100%;
flex: 0 0 25%; /* column width */
max-width: 25%; /* column width */
white-space: normal;
text-align: center;
}
/* below for smartphone */
@media (max-width: 767.9px) {
.results table {
border: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}<div class = "results">
<table>
<thead>
<tr>
<th>Header</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
</tbody>
</table>
</div>Если у вас разные размеры ширины для каждого столбца, вы можете использовать nth-child. В вашем html вы можете использовать nth-child(1)...nth-child(4) следующим образом
.results tr th:nth-child(1),
.results tr td:nth-child(1) {
flex: 0 0 30%;
max-width: 30%;
}
Полосы прокрутки по-прежнему не отображаются. Проблема в том, что таблица очень упрямо относится к тому факту, что полосы прокрутки не отображаются, если вы явно не установите высоту. Вы устанавливаете много ширины, но она должна быть высотой (если только я не могу изменить все это на высоту). На данный момент использование vh кажется моим лучшим выбором, так как полоса прокрутки перемещается вместе с экраном, но не совсем так.
Извините, в своем вопросе вы упомянули полосу прокрутки внизу. Хорошей практикой является полное отсутствие нижней полосы прокрутки на всех устройствах. Если вам нужна вертикальная полоса прокрутки, используйте overflow-y: visible; (другие свойства — overflow-x и overflow). Если вы хотите горизонтальную полосу прокрутки на самой таблице, используйте .results table { overflow-x: auto; }
На самом деле я не хочу, чтобы нижняя полоса прокрутки была частью страницы, а частью фактической таблицы. Таким образом, я могу прокручивать по горизонтали, не прокручивая всю страницу. Это странно, потому что вертикальная полоса прокрутки работает нормально, но если я отрегулирую размер окна, нижняя горизонтальная полоса прокрутки изменит положение. Кажется, что он пытается исправить положение, если я использую vh, но он все еще не приклеен к нижней части экрана (то есть нижней части таблицы).
Возможно, лучший способ — настроить точку останова, где содержимое таблицы перекрывает представление браузера @media (max-width: 767.9px) { .... } Например, изменить его на 991,9px. Тогда css выше будет включать горизонтальную полосу прокрутки в таблице, если представление меньше, чем содержимое.
Вы можете использовать единицы измерения ViewHeight и ViewPort, чтобы указать ширину и высоту элементов относительно окна просмотра, где 100vw — это ширина всего окна просмотра. То же самое с Viewheight, 100vh — это высота всех окон просмотра.
вот ссылка mdn для Unitshttps://developer.mozilla.org/en-US/docs/Web/CSS/length
.results{
height:100vh;
}
Редактировать
Очень распространенная проблема с vw и vh заключается в том, что они не учитывают такие вещи, как отступы и поля. вам придется вручную вычесть эти значения с помощью calc()
Допустим, сумма всех ячеек, полей и отступов составляет 20 пикселей.
.results{
height: calc(100vh - 20px);
}
И да, calc работает со всеми единицами измерения.
Трудно сказать, поможет ли это, потому что нижняя полоса прокрутки находится за пределами экрана. Я пытался установить для него разные разрешения, но полоса прокрутки все еще не отображается на экране (так что это может сработать), но я даже пробовал заполнение, и я не могу заставить полосу прокрутки снова появиться. Проблема в том, что в реальном коде таблица не занимает 100% экрана.
Вау, это отлично работает. Все продолжали делать это таким сложным, но это все, что нужно. Теперь он идеально приклеен к нижней части экрана.
вы пробовали исправить положение?