我正在尝试创建一个从隐藏页面内容的标题中删除的叠加层。当叠加层的内容增长时，此叠加层需要具有未隐藏的页脚。由于它的动态性，我转向了flexbox。
我有一个代码笔，其中包含我尝试在Chrome和Firefox中工作的行为。 https://codepen.io/Branhammer/pen/KZOJxJ/
以下是代码段中的代码：
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: helvetica, arial, sans-serif;
}
.app {
height: 100vh;
background: cadetblue;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
}
/**
* Note that this demo will actually work fine in IE10. This is because in IE10, flex-shrink is 0 instead of 1. See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
**/
.header {
height: 50px;
flex-shrink: 0;
background: orchid;
position: relative;
}
/**
* 1. IE9-11 do not support main el, so display: block is needed.
* 2. IE10 sets flex-shrink to zero. This was originally according to spec, but has since changed. See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
**/
.main {
display: block; /* 1 */
flex-grow: 1;
flex-shrink: 1; /* 2 */
background: blanchedalmond;
overflow: auto;
padding: 0 20px;
}
.footer {
height: 50px;
flex-shrink: 0;
background: coral;
}
.overlay {
background: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.overlay-content {
width: 1000px;
background: yellow;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
max-height: 100%;
left: 50%;
transform: translateX(-50%);
}
.overlay-content-body {
overflow-y: auto;
}
.overlay-content-footer {
background: blue;
flex: 0 0 auto;
}
.content {
flex: 1 1 auto;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
h1 {
font-size: 36px;
}
p {
font-size: 16px;
}<body class="app">
<header class="header"></header>
<div class="content">
<div class="overlay">
<div class="overlay-content">
<div class="overlay-content-body">
<h1>Cupcake ipsum dolor sit amet</h1>
<p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps.
Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>
<p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps.
Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>
</div>
<div class="overlay-content-footer">
footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text footer text
</div>
</div>
</div>
<main class="main">
<h1>Cupcake ipsum dolor sit amet</h1>
<p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps.
Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>
<p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps.
Biscuit tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>
<p>Fruitcake macaroon candy canes marshmallow gummi bears biscuit I love dessert. Oat cake sugar plum marzipan gummi bears marshmallow I love brownie jelly bonbon. Sweet roll apple pie wafer fruitcake. Gummi bears lemon drops sesame snaps. Biscuit
tiramisu sugar plum. Carrot cake pastry cupcake tootsie roll chocolate jujubes. Pudding muffin sweet. Cheesecake candy canes wafer gingerbread sweet.</p>
<p>Liquorice candy canes cake. Gummies wafer tart topping pastry soufflé I love pie. Cake cookie croissant cupcake chocolate cake. Liquorice jelly beans pudding sugar plum biscuit fruitcake. Soufflé tootsie roll macaroon pudding. Chocolate cake
cake sesame snaps sugar plum biscuit I love croissant icing. Caramels jelly dessert candy bonbon bear claw chocolate bar cheesecake icing. Toffee I love cake gingerbread jelly-o tootsie roll. Sesame snaps pie cupcake sweet. Croissant danish
brownie gummies lollipop chupa chups gummies danish.</p>
<p>Chupa chups pudding topping caramels pie. Tart jujubes ice cream muffin sugar plum. Soufflé candy canes I love lollipop pastry brownie danish apple pie. Apple pie chupa chups biscuit chocolate bar I love muffin I love. Caramels cupcake I love
sugar plum icing candy canes I love macaroon. Marzipan danish cheesecake marshmallow jelly. Jelly-o sugar plum liquorice donut I love pastry candy donut. I love gummi bears chocolate.</p>
<p>Gingerbread toffee pastry gingerbread I love toffee. Biscuit jelly wafer I love cheesecake candy canes chocolate cake. I love cake I love cotton candy muffin oat cake I love I love. I love bonbon macaroon toffee powder chupa chups cotton candy
tootsie roll chocolate. Croissant dessert chocolate bar. Apple pie I love croissant sugar plum cotton candy I love. Candy canes jelly I love. Jelly beans cupcake brownie pudding lemon drops</p>
<p>Cheesecake macaroon toffee sesame snaps cotton candy cotton candy I love. Cake sugar plum sweet marshmallow I love. Soufflé liquorice ice cream candy canes I love tootsie roll marzipan biscuit jelly. I love I love tiramisu donut. I love bear
claw pastry toffee. Cheesecake apple pie bonbon bear claw jelly-o topping tootsie roll chocolate bar. Cake bonbon toffee donut macaroon chocolate lemon drops gummies gummies. Jelly beans chocolate bar cotton candy halvah fruitcake.</p>
</main>
<footer class="footer"></footer>
</div>
</body>
我也需要这个在IE中工作。我发现页脚弹性行为不起作用。关于如何解决这个问题的任何想法？