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

作者: survivorsfyh | 来源:发表于2021-02-20 16:49 被阅读0次

CSS 子级元素固定在父级元素底部 - css
css常见样式
CSS踩坑
flex-box
css中的属性继承
CSS继承,层叠,优先级
css常见布局(二)
前端Day8
图片等比设置宽高
day03

日常开发中经常会遇到类似移动端底部 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>

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