纯css实现：固定在页面底部的按钮-一一网

这是我参与更文挑战的第18天，活动详情查看：更文挑战

前言

今天写一个新项目，写到页面底部固定按钮的时候（不是视窗底部），直觉告诉我，这其实是一个简单但是又复杂的问题，因为UI告诉我，这次的页面高度是会变化的，并且底部按钮的高度是会变化的！那就意味着在页面高度不够的时候，按钮看起来要固定在视窗底部，而页面高度足够的时候，按钮要固定在页面底部，我并不能确定被底部按钮实际以那个为准。
那么，该如何解决这个情况呢？

Flex布局实现

难不成把按钮和按钮上面的内容都放在同一个盒子，然后用100vh减去按钮的高度来实现？如下代码：

<style>
    .content{
        max-height: calc(100vh - ?); 按钮高度不确定，无法计算
    }
</style>

<div class="main">
       <div class="content"></div>
       <button>不固定高度的按钮</button>
   </div>
复制代码

看来想错方向了，这样的效果和原先没什么区别。
不过幸亏我之前写过一篇文章《多图预警！详细谈谈Flex布局的容器元素和项目元素的属性~》，对布局这块印象还很深刻，我立马又想到了用Flex布局来解决这个问题。不得不说，自己敲过的代码记得就是清楚，尤其是再转为文字输出一边，提升的更高，记得也更多。
三下五除二我就敲出了如下代码：

<style>
    .main{
        min-height: 100vh;
        display: flex;
        flex-flow: column;
    }
    .content{
        flex: 1; 设置了一个大于0的flex值，使得元素可伸缩，实际上是flex-grow、flex-shrink和flex-basis的简写语法。
    }
</style>


<div class="main">
    <div class="content">
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
    </div>
    <button>不固定高度的按钮</button>
</div>
复制代码