uniapp问题杂记

一,以后就会陆续在这篇文章中记录常见和困难的问题

目录

一,以后就会陆续在这篇文章中记录常见和困难的问题

1.uniapp怎么设置百分百高

[2.uniapp 解决width="100%"下padding无效问题](#2.uniapp 解决width=“100%“下padding无效问题)


1.uniapp怎么设置百分百高

前言,今天实习生问我怎么设置百分百高,为什么他的页面设置百分百了还是有滚动条,在这纪录一下希望帮到新入门同样有疑惑的小伙伴

在App.vue中 定义样式

复制代码
	uni-page-body {
		height: 100%;
	}

然后在你布局的页面 最外层盒子直接设置百分百高就好了

复制代码
<template>
	<scroll-view class="content-box" scroll-x="true" refresher-enabled="true" :refresher-triggered="refresh"
		@refresherrefresh="onRefresh">

</scroll-view>
</template>




//style
.content-box{
    height:100%
}

2.uniapp 解决width="100%"下padding无效问题

原因:我们给内容设置了width为100%,却在默认情况下它是标准盒模型,所以width只是指content的值,此时我们在给他加padding或者设置border宽度的时候,其实盒子的宽度就大于100%了。

解决方法:给加了padding或border的盒子加

复制代码
box-sizing: border-box;
相关推荐
索迪迈科技1 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作2 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG9134 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~10 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
Zz_waiting.1 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI1 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
妄小闲1 小时前
网页设计模板 HTML源码网站模板下载
前端·html
icebreaker2 小时前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁2 小时前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊2 小时前
state和ref
前端·javascript·react.js