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() 函数运算时，运算符的前后均需保留⼀位空格间隔
css固定定位
其次，固定布局需要⽤到 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" @click="handleReset">重置签名</button>                <button type="button" class="btnStyle" @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>
以上便是此次分享的全部内容，希望能对⼤家有所帮助！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。