当页面高度为850rpx时 固定定位要设置多少才能一直保证在底部
时间: 2024-02-20 10:01:44 浏览: 20
如果您想要一个元素始终固定在底部,可以使用CSS的`position: fixed`属性。对于一个高度为850rpx的页面,您可以将tabbar的`bottom`属性设置为0,这将会将其固定在页面底部。所以,您的CSS代码可以这样写:
```
.tabbar {
height: 100rpx;
display: flex;
background-color: gold;
width: 100%;
position: fixed;
bottom: 0;
.resetting {
height: 70rpx;
width: 40%;
background-color: #FFFFFF;
border: 1rpx solid red;
border-radius: 40rpx;
}
.complete {
height: 70rpx;
width: 40%;
background-color: rebeccapurple;
color: #FFFFFF;
border-radius: 40rpx;
}
}
```
这样,您的tabbar将会始终固定在页面底部。
相关问题
vue中css怎样设置菜单从底部以y方向展示高度为50rpx
您好!要实现从底部以y方向展示高度为50rpx的菜单,可以通过以下步骤进行设置:
1. 首先,为菜单元素添加一个 class 名称,比如 .bottom-menu。
2. 在 CSS 样式中,为该 class 名称添加以下属性:
```
.bottom-menu {
position: fixed; /* 设置为固定定位 */
left: 0; /* 位于页面左侧 */
bottom: 0; /* 位于页面底部 */
height: 50rpx; /* 设置菜单高度为50rpx */
width: 100%; /* 宽度占满全屏 */
background-color: #fff; /* 背景颜色 */
z-index: 999; /* 设置 z-index 值,保证在页面最上层 */
}
```
这样就可以实现一个从底部以y方向展示高度为50rpx的菜单了。当然,具体实现还需要根据您的具体需求进行调整。
为一个盒子绑定动态样式,当其中变量dizhilong给的值>20时,盒子高度变为30rpx
可以使用如下代码实现:
```css
.box {
width: 100px;
height: 20rpx;
background-color: #CCC;
}
.box[dizhilong>20] {
height: 30rpx;
}
```
其中,`[dizhilong>20]` 表示当变量 `dizhilong` 的值大于 20 时,应用该样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)