不满一屏固定显示在底部，超出一屏随页面滚动

代码

 <style>
            body,
            html {
                height: 100%;
            }
            .wrapper {
                height: 100%;
            }
            .main {
                min-height: 100%;
                /* 与.footer的高度对应 */
                padding-bottom: 100px;
                background: red;
                color: white;
                box-sizing: border-box;
            }
            .footer {
                height: 100px;
                /* 与.footer的高度对应 */
                margin-top: -100px;
                background: blue;
                color: white;
            }
</style>
<body>
        <div class="wrapper">
            <div class="main">主题</div>
            <div class="footer">底部</div>
        </div>
</body>

演示

不满一屏

演示一.jpg

超出一屏

演示二.gif