Исправить заголовок в прокручивающемся материале-UI Popover

Question

material-ui может иметь фиксированный верхний и нижний колонтитулы в диалоге с длинным прокручиваемым содержимым.

Я хочу добиться того же эффекта в popover .

Взяв пример:

<Popover>
  <Header>Fixed header</Header>
  <Content>long long long text</Content>
  <Footer>Submit button</Footer>
</Popover>

Я хочу, чтобы полоса прокрутки появлялась в Content, в то время как Header и Footer остаются фиксированными в своем поповере.

Я могу достичь желаемого результата, установив простой style={{ height: 250 }} на Content, но тогда я потеряю динамический размер поповера, который регулирует его высоту в соответствии с требуемым размером его дочерними элементами, но остается в пределахэкрана.

Возможно ли это даже с помощью самой библиотеки?Если нет, кто-нибудь знает какие-либо обходные пути?

Answer 1

Этого можно добиться, установив max-height содержимого динамически, вы должны использовать max-height: calc( 100vh - {headerHeigh - footerHeight}), вам нужно сделать {headerHeigh - footerHeight} вручную, тогда ваш контент должен теперь справиться с переполнением с помощью * 1004. *, рабочий пример:

body {
  font-family: sans-serif;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid .popover {
  border: 1px solid black;
}

.grid .popover .content {
  max-height: calc(100vh - 70px);
  overflow: auto;
}

header {
  background: red;
  height: 40px;
}

footer {
  background: green;
  height: 30px;
}

<div class="grid">
		<div class="popover">
			<header>header</header>
			<div class="content">
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
			</div>
			<footer>footer</footer>
		</div>
		<div class="popover">
			<header>header</header>
			<div class="content">
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
			</div>
			<footer>footer</footer>
		</div>
	</div>