【关键词】
底部、postion
【问题背景】
快应用中某个组件如果要实现在页面底部展示,该如何实现呢?
【实现方法】
可以通过设置postion为fixed,再设置margin-top属性和bottom属性来将组件在页面底部显示。
方法一:设置postion为fixed,bottom为0px
<template>
<div class="container">
<input type="button" value="ceshi" class="btn" style="position: fixed; bottom: 0px" />
</div>
</template>
<style>
.container {
flex: 1;
flex-direction: column;
}
.btn {
width: 80%;
background-color: #23ec2d;
border: 1px solid #000000;
}
</style>
截图:
方法二:设置postion为fixed,margin-top为屏幕的高度减去组件的高度。这种方法需要拿到屏幕高度才能进行设置,代码上更复杂一些,推荐使用第一种方式来实现。
<template>
<div class="container">
<input type="button" value="ceshi" class="btn" style="position: fixed; margin-top: 1330px" />
</div>
</template>
<style>
.container {
flex: 1;
flex-direction: column;
}
.btn {
width: 80%;
background-color: #23ec2d;
border: 1px solid #000000;
}
</style>
截图:
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
标签:flex,postion,底部,组件,fixed,页面 From: https://www.cnblogs.com/developer-huawei/p/17373243.html