css布局之版权信息

要实现这样一个功能：

        版权信息永远位于main页面的底部，当main页面内容不满屏时，footer部分依旧处于视窗的下方。

<div class="main">
    <div class="inner">
        <div class="main-content">
            主要内容
        <div>
        <footer>版权信息<footer>
    </div>
<div>

.inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //height: calc(~"100vh - 100px"); // less的写法
    height: calc(100vh - 100px);  // css的写法
    // 100px是头部的高度，视情况修改
}

如果有更好的实现方式，欢迎留言~