阅读 527

纯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>
复制代码

实现效果如下: GIF 2021-6-18 23-52-07.gif

可以看出,当页面高度不满100vh时,底部按钮靠在视窗底部,页面高度大于100vh时,底部按钮靠在页面底部。大功告成,完美!

后记

今天是我坚持日更的第十八天,今天工作比较忙,加班回来就已经很晚了,留给写作的时间不多了,下班路上想的题材也没有用到,差点没完成日更大业。

PS: 今天是我参加掘金更文挑战的第18天,有志者,事竟成。大家一起加油呀~

附更文挑战的文章目录如下:

文章分类
前端
文章标签