CSS 子级元素固定在父级元素底部 - css

日常开发中经常会遇到类似移动端底部 Tabbar 的效果,将子元素固定在父级元素底部的情况;


首先,需要配置子父视图的宽高

em: 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;
ex: 依赖于英文字母小 x 的高度
ch: 数字 0 的宽度
rem: 根元素(html)的 font-size
vw: viewpoint width,视窗宽度,1vw=视窗宽度的1%
vh: viewpoint height,视窗高度,1vh=视窗高度的1%
vmin: vw 和 vh 中较小的那个
vmax: vw 和 vh 中较大的那个

通过如上可以简单了解到获取当前屏幕视图宽高的单位,所以此次使用 calc() 和 vh 的计算方式配置 div 的宽高;

calc() 函数是用于计算长度值的方法,任何长度值都可以通过该种方式进行函数计算得出,其函数计算方法支持加减乘除 "+"、"-"、"*"、"/" 四种运算模式,运算的优先级也是同标准数学运算的优先级规则;
注:使用 calc() 函数运算时,运算符的前后均需保留一位空格间隔

其次,固定布局需要用到 position 的相对定位 relative 和绝对定位 absolute 这两个属性的配合还有对需要对固定在底部的视图设置 bottom: 0 即可;

最后,具体实现方式小结如下(code 以 vue 为例):

<template>
    <div>
        <van-nav-bar
                title="考官签名"
                left-arrow
                @click-left="onClickGoBack"
        />
        <div class="contentViewStyle">
            <div class="signatureViewStyle">

            </div>
            <div class="footerViewStyle">
                <button type="button" class="btnStyle" style="background-color: #EBF3FF; color: #3D7FFF;" @click="handleReset">重置签名</button>
                <button type="button" class="btnStyle" style="background-color: #4C87FE; color: #ffffff;" @click="handleGenerate">保存签名</button>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .contentViewStyle {
        /*相对定位*/
        position: relative;
        width: 100%;
        height: calc(100vh - 46px);
        background-color: #F4F5F6;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .signatureViewStyle {
        width: 100%;
        height: calc(100vh - 42px);
    }
    .footerViewStyle {
        /*绝对定位*/
        position: absolute;
        width: 100%;
        height: 42px;
        bottom: 0;
        background-color: cornflowerblue;
    }
    .btnStyle {
        height: 100%;
        width: 50%;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        border: none;
        outline: none;
    }
</style>

以上便是此次分享的全部内容,希望能对大家有所帮助!

推荐阅读更多精彩内容