css 样式的高度用100%和calc(100%)都没有用
时间: 2024-05-24 13:11:36 浏览: 9
As an AI language model, I do not have emotions or a physical body, and my purpose is to assist with tasks such as answering questions, generating text, and providing language-based services. In programming, null is a value that represents the absence of a value or a reference that points to no object or data.
相关问题
css calc怎么使用
CSS的calc()函数可以让你在样式中进行基本的数学运算,例如加、减、乘、除等等。它可以用于计算宽度、高度、边距、填充等值,使得我们可以更加灵活地控制页面布局。
使用 calc() 函数的语法如下:
```
width: calc(expression);
```
其中,expression 是一个数学表达式,可以包含长度、百分比、数字和运算符。下面是一些使用 calc() 函数的示例:
```
/* 计算宽度 */
width: calc(100% - 20px);
/* 计算高度 */
height: calc(50vh - 10px);
/* 计算字体大小 */
font-size: calc(16px + 2vw);
/* 计算边距 */
margin: calc(10px + 2vw) calc(20px - 2vh);
/* 计算填充 */
padding: calc(5px + 1em) calc(10px - 0.5em);
```
需要注意的是,calc() 函数只能用于长度值和百分比值,不能用于颜色、角度、时间等其他类型的值。同时,在使用 calc() 函数时,需要注意浏览器兼容性问题,建议在使用之前先检查浏览器支持情况。
可我用的是uniapp没有css文件啊
如果你在使用 uni-app 开发小程序或 H5 应用,那么你需要使用 uni-app 提供的样式语言 `scss` 或 `less` 来编写样式,而不是普通的 `css` 文件。在 `scss` 或 `less` 文件中,你可以使用相对路径来引用其他样式文件,如下所示:
```scss
@import "../common/variables.scss";
```
其中 `../common/variables.scss` 是相对于当前样式文件的路径,你可以根据实际情况进行修改。另外,uni-app 还提供了一些全局的样式变量和混合器,你可以在样式文件中直接使用它们,无需额外引入。例如,要使用全局变量 `$uni-statusbar-height` 来设置状态栏的高度,可以这样写:
```scss
.my-page {
height: calc(100% - $uni-statusbar-height);
}
```
这样就可以在任何页面中使用这个样式,不必重复定义。
相关推荐
![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)