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

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%;
    }
}

 

posted @ 2023-08-03 10:25  F-Yi  阅读(86)  评论(0)    收藏  举报