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

Question

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

html css page-size

1

David Carek 28 Янв 2015 в 18:00

Answer 1

Вы можете использовать единицу 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>

1

Paul Rowe 28 Янв 2015 в 15:10

Answer 2

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

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

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

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

0

Alec Deitloff 28 Янв 2015 в 15:10

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

2 ответа

Похожие вопросы

Новые вопросы

html