Заполнение карты четкости до высоты экрана

Используя Clarity и Angular 6, у меня есть карточка в области основного содержимого, которую я хотел бы заполнить по всей длине текущего представления (ни больше, ни меньше). Единственный способ, который я нашел, - это установить высоту на «-webkit-fill-available» (сейчас только в Chrome).

Проблема заключается в том, что внизу кажется немного места, из-за которого в области содержимого отображается полоса прокрутки.

В идеале я бы никогда не видел полосу прокрутки в области содержимого и чтобы весь контент соответствовал текущей высоте экрана.

Вот пример stackblitz, демонстрирующий проблему.


person erin    schedule 05.06.2018    source источник


Ответы (1)


Ваше решение не является стандартным и не будет работать в IE / Edge и может не работать с Safari из-за https://caniuse.com/#search=fill-available.

Вы можете попробовать присвоить ему height: calc(100vh - 5.5rem);, который дает карточке высоту порта просмотра, но вычитает высоту строки заголовка и полей карточки и областей содержимого. В конечном итоге, чтобы использовать CSS для расчета высот, вам необходимо знать, какие другие элементы находятся на странице, и рассчитывать их по этим известным высотам, иначе вам придется что-то делать с JavaScript, чтобы проверить элементы страницы, чтобы найти доступное пространство.

person Jeremy Wilken    schedule 05.06.2018
comment
Спасибо, Джереми, все работает отлично! Но я действительно удивлен, что нет возможности напрямую получить текущий размер родительского контейнера через CSS. (Я разработчик C # / WPF, приходящий в мир Интернета, поэтому я все еще изучаю, как работает макет). Спасибо команде Clarity за проделанную огромную работу - в восторге от всего, что облегчает мою жизнь! - person erin; 05.06.2018
comment
Рад, что это сработало для вас. Роль CSS ограничена в некоторых возможностях, и то, что я предоставил, работает только в том случае, если вы не добавляете на страницу больше контента, который изменил бы высоту. - person Jeremy Wilken; 06.06.2018