修复滚动材质-ui 弹出框中的标题答案

【问题标题】：Fix header in scrolling material-ui popover修复滚动材质-ui 弹出框中的标题
【发布时间】：2019-05-31 19:14:17
【问题描述】：

material-ui 可以在Dialog 中具有固定的页眉和页脚，并带有长的滚动内容。

我希望在popover 中实现同样的效果。

举个例子：

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

我希望滚动条出现在Content 中，而Header 和Footer 保持固定在它们的弹出窗口中。

我可以通过在Content 上设置一个简单的style={{ height: 250 }} 来实现所需的结果，但是我会失去弹出框的动态大小，它会根据其子项所需的大小调整其高度，但保持在屏幕的限制。

这甚至可以通过使用库本身来实现吗？如果没有，是否有人知道任何解决方法？

【问题讨论】：

不使用Dialog的原因是什么？
@RyanCogswell，弹出框和对话框服务于不同的目标。我只与 Dialog 进行比较，因为它具有我要重现的内容滚动。我正在创建一个带有搜索/过滤的选择菜单。可以说是“高级下拉菜单”。
我只是对带有滚动页眉/页脚的 Popover 类型感到好奇。在接下来的几周内，我将致力于 enhancements to Select/Menu 以支持“下拉”变体。这将涉及一些与 Popper/Popover 相关的代码重构。如果您可以分享一个显示您正在做的事情的要点的沙盒，我很想看到它添加到我在改进库时想到的用例中。
@RyanCogswell，关于 Select，如果我们可以在 Button 上添加（多）选择菜单而不是 Input，那就太棒了。目前这是不可能的。我们可以通过单击链接按钮“打开”它，但它仍然需要Input。
@RyanCogswell，关于我的用例，我创建了类似于 github 的标签菜单的东西。顶部是搜索输入，中间是选择列表。底部有一个关闭按钮/其他操作。 i.imgur.com/KnSBq5N.gif

标签： reactjs material-ui popover

【解决方案1】：

您可以通过以动态方式设置内容的max-height 来实现此目的，您必须使用max-height: calc( 100vh - {headerHeigh - footerHeight}) 您必须手动执行{headerHeigh - footerHeight}，然后您的内容现在应该如何使用@987654324 处理溢出@，一个工作示例：

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>

【讨论】：

谢谢！你完全正确。我之前尝试过，但结果是一个“漂亮的滚动条”包装器搞砸了。最终修复，max-height: calc(100vh - 32px - footerPx - headerPx);，100vh - 32px 是Popovers Paper 元素的最大高度。