height | uni-app-x

# height

height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 语法

height: <viewport-length>{1,2};

# height 的属性值

名称

兼容性

描述

auto

由浏览器为元素计算并选择一个高度。

fit-content

将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))

max-content

设置为允许的最大高度。

min-content

设置为允许的最小高度。

注意

属性值为长度 <length> 时，App平台可以不设置单位，Web端必须设置单位，详情参考长度单位。

# 默认值

auto

# 示例

hello uni-app x

Template

Script

<template>
  <view style="flex-grow: 1;">
    <view>
      <text>height: 250px</text>
      <view class="common" style="height: 250px;"></view>
    </view>

    <view style="height: 250px;">
      <text>height: 50%</text>
      <view class="common" style="height: 50%;"></view>
    </view>
  </view>
</template>



<style>
  .common {
    width: 250px;
    background-color: red;
  }
</style>