material-ui可以在带有长滚动内容的Dialog 中具有固定的页眉和页脚。
我希望在popover 中达到同样的效果。
举个例子：
<Popover>
<Header>Fixed header</Header>
<Content>long long long text</Content>
<Footer>Submit button</Footer>
</Popover>
我希望滚动条出现在Content, while 中Header并Footer固定在它们的弹出窗口中。
我可以通过设置一个简单的style={{ height: 250 }}on来达到预期的结果Content，但是我会失去弹出框的动态大小，它根据其子项所需的大小调整其高度，但保持在屏幕的限制内。
这甚至可以通过使用库本身来实现吗？如果没有，有人知道任何解决方法吗？
您可以通过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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句