在滚动 material-ui 弹出窗口中修复 header

Question

material-ui 可以在 Dialog 中有一个固定的 header 和页脚，其中包含长的滚动内容。

我希望在 popover.

中实现同样的效果

举个例子：

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

我希望滚动条显示在 Content 中，而 Header 和 Footer 固定在弹出窗口中。

我可以通过在 Content 上设置一个简单的 style={{ height: 250 }} 来达到预期的效果，但是我会失去弹出窗口的动态大小，它根据所需的大小调整其高度它 children 但保持在屏幕范围内。

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

Answer 1

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

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>

在滚动 material-ui 弹出窗口中修复 header

Fix header in scrolling material-ui popover

popover

reactjs

material-ui