Получаете ли MatBottomSheet заподлицо с верхней панелью инструментов? - PullRequest
Новая
       9

Получаете ли MatBottomSheet заподлицо с верхней панелью инструментов?

0 голосов
/ 04 октября 2019

Если мы хотим, чтобы MatBottomSheet всплыло так, чтобы его верхняя часть находилась на одном уровне с верхней панелью инструментов, каков наилучший способ добиться этого? Это демо из документации.

https://material.angular.io/components/bottom-sheet/examples

В этом демонстрационном стеке Я предполагаю, что верхняя панель инструментов имеет высоту 40px. Таким образом, я установил height из HelloComponent, отображаемого MatBottomSheet 100% и верхним полем, на 40px, что должно удерживать его от перекрытия с панелью инструментов, однако на этом листе это получилось не совсем правильно.

Как нам оформить контейнер MatBottomSheet? Я также пытался: 


.mat-bottom-sheet-container {
  min-height: 100%;
  margin-top: 40px;
}

Я думаю, что это будет работать: 


.mat-bottom-sheet-container {
  min-height: vh;
  margin-top: 40px;
}

Кто-нибудь знает, почему min-height: 100% не работает?

1 Ответ

0 голосов
/ 04 октября 2019

Если высота будет принята за 100 процентов, оставляя верхнюю панель навигации 40 пикселей, вы можете попробовать это css 

.mat-bottom-sheet-container {
  height: calc(100%-40px);
  margin-top: 40px;
}

Используйте функцию calc, она всегда будет корректироваться до 100% высоты, оставляя ваши 40px дляверхняя панель навигации

...