固定页眉，可滚动内容，固定页脚布局

Question

我在下面创建了一个我想要实现的示例。 它使用position: fixed用于顶部和底部酒吧。 但我希望它在 css 网格内（我不想为页眉和页脚使用边距，我也不想添加隐藏的 div 元素），这可能吗？

 * { margin: 0; } html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; } header { position: fixed; width: 100%; height: 100px; background-color: #aaaaaa; } main { margin-top: 100px; margin-bottom: 50px; background-color: #dddddd; overflow: scroll; } footer { position: fixed; bottom: 0; width: 100%; height: 50px; background-color: #444444; }

 <header>Header</header> <main> Main start <br> <br> <br> <br> <br> <br> <br> Main inside <br> <br> <br> <br> <br> <br> <br> <br> Main end </main> <footer>Footer</footer>

https://codepen.io/stpoa/pen/zyPqaq

Answer 1

你不需要position: fixed 。 您可以使布局单独使用网格属性。

 body { display: grid; grid-template-rows: 100px 1fr 50px; height: 100vh; margin: 0; } main { overflow: auto; } header { background-color: #aaaaaa; } main { background-color: #dddddd; } footer { background-color: #444444; }

 <header>Header</header> <main> Main start<br><br><br><br><br><br><br> Main inside<br><br><br><br><br><br><br> Main inside<br><br><br><br><br><br><br> Main inside<br><br><br><br><br><br><br> Main inside<br><br><br><br><br><br><br> Main inside<br><br><br><br><br><br><br> Main inside<br><br><br><br><br><br><br> Main end </main> <footer>Footer</footer>