UI-GRID Высота сетки Процент площади экрана

Каков наилучший способ справиться с высотой ui-grid. Мы хотим, чтобы он занимал 85% экрана, а нижний колонтитул — 15%.

Когда я установил высоту сетки на 85%, это ничего не делает.

Когда я изменяю высоту пикселей, это толкает экран вниз.

Спасибо


angularjs angular-ui-grid
person Michael JDI    schedule 09.06.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Это связано с тем, что сетка виртуализирует свое содержимое. Несмотря на наличие, скажем, 500 тыс. строк в наборе данных, он понятия не имеет, сколько из них он должен отображать одновременно.

К счастью, в вашем случае установка высоты сетки с помощью процента области просмотра вероятно, будет работать:

.grid {
  height: 98vh;
}

Это говорит о том, что сетка занимает почти всю высоту области просмотра браузера (обратите внимание, что 100vh — это слишком много).

Посмотрите этот плункер для демонстрации: http://embed.plnkr.co/65ScOLedYpm1rSKztQkE/preview

В этом сообщении есть дополнительная информация: http://brianhann.com/make-ui-grid-take-up-the-whole-page/

Надеюсь, это поможет!

person c0bra    schedule 09.06.2015
comment
Вау, это сумасшедший способ сделать высоту. Я не знал о проценте области просмотра! Хорошая вещь! - person fauverism; 09.06.2015