前端如何实现将header、footer、main都处于一屏

发布时间 2023-08-03 10:34:24作者: F-Yi

html结构:

<html>
    <body>
    <header></header>
    <main>
      <section></section>
    </main>
    <footer></footer>
  </body>
</html>

scss:

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 999;
    }

    main {
        flex: 1;
        width: 100%;
    }
}