Установить фиксированный размер высоты страницы HTML

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

Источник

2 ответа

Решение

Вы можете использовать vh единицы, но вам нужно будет указать высоту для элементов макета на вашей странице, если вы хотите, чтобы высота таблицы была "оставшейся высотой страницы".

Что такое vh? 1vh составляет 1% от высоты области просмотра, высоты внутри окна при загрузке страницы. 100vh составляет 100% высоты окна просмотра. Я не верю, что высота регулируется при изменении размера окна.

<style type="text/css">
div#header {
  height: 25vh;
  overflow: scroll;
}
div#table {
  height: 75vh;
  overflow: scroll;
}
</style>
<body>
  <div id="header">This text explains the contents of the table below.</div>
  <div id="table"><table>...</table></div>
</body>
Источник

Это может быть выполнено либо с помощью Javascript, либо вы можете попробовать следующий код:

.myTable {
    position:fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

Вы не можете использовать height: 100%; директива, однако. Это не работает при попытке использовать его на ребенка, вложенного в <html> или же <body> непосредственно.

Изменить: Насколько я знаю, height: 100% директива не работает ни с одним элементом, вложенным в элемент без фиксированной высоты. Я имею в виду, height: 100% будет работать только в том случае, если его родителю явно сказано, какого роста (например, height: 600px;).

Источник
Другие вопросы по тегам