如何使子元素高度超出父元素限制且不影响其他布局
=======================

#### 问题现象

父元素高度固定，子元素不设置高度时，如何设置可以使子元素高度随内容增加而变化，并向上超出父元素区域。

要求如下：

*   父组件高度固定，子组件不设置高度，子组件随着子组件内部元素增多而变高，允许超出父组件。
*   子元素内容超出限制后可以覆盖在父元素上面但不能影响其他布局。

示意图如下，下图中的图集描述需要点击向上展开，并且遮盖上方元素而不是把上方布局压缩：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/da/v3/1WCS5Q-kReWryddHrve4mg/zh-cn_image_0000002658799559.png?HW-CC-KV=V1&HW-CC-Date=20260709T134041Z&HW-CC-Expire=86400&HW-CC-Sign=CDB4E1C59679B8086756D56E69F2F1F3713D86B9E1309C531851124D3948721E "点击放大")

#### 效果预览

| 
文案内容少，点击Add按钮之前

 | 

点击Add按钮后子组件高度扩展到父组件，布局不变

 |
| :-- | :-- |
| 

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d0/v3/bMvcivFTTsyErqPlmiI_LQ/zh-cn_image_0000002628560202.png?HW-CC-KV=V1&HW-CC-Date=20260709T134041Z&HW-CC-Expire=86400&HW-CC-Sign=74B312371394E4B1667F0F6C09EB1333BD3855BC6048817359165AF54E251FB5 "点击放大")

 | 

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a6/v3/IzpSqG1oR1Kdbwe7bpcrUw/zh-cn_image_0000002658919507.png?HW-CC-KV=V1&HW-CC-Date=20260709T134041Z&HW-CC-Expire=86400&HW-CC-Sign=ABE4237CDDBF85A715C9B77FBBD79D3B1620DBB9D2BC4546B74F2E0387A74E60 "点击放大")

 |

#### 背景知识

[margin](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#margin)属性定义了元素边框外部的空白区域，给其赋值可以设置元素与元素之间的距离。如果设置负值，则两个元素会出现重叠现象。

#### 解决方案

父元素高度不设置成一个小的高度，而是设置成上限，然后设置margin的top属性为负的（取值范围根据子组件内容自定义，top=子组件高度-父组件高度，如下面示例代码中，子组件高度为50，父组件高度为200，则top为-150），这样子组件高度变化时可以沿着父组件向上扩展，且不影响其他组件的布局。

完整示例参考如下：

@Entry
@ComponentV2
struct ParentAndSubComponent {
  @Local message: string \= '01234567890123456789';

  build() {
    Column() {
      Column() {
        Button('Add')
          .backgroundColor('#ff0a59f7')
          .fontSize(25)
          .width('50%')
          .onClick(() \=\> { _//_ _点击该按钮内容增长，子组件高度扩展至其他组件，布局不变_
            if (this.message.length \>\= 200) {
              return;
            }
            this.message \= this.message.concat('0123456789');
          })
      }
      .width('100%')
      .layoutWeight(1)
      .backgroundColor('#ffe5e5ea')
      .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP\])

      Column() {
        Scroll() {
          Text(this.message)
            .fontSize(25)
            .fontColor('#ff0a59f7')
        }
      }
      .justifyContent(FlexAlign.End)
      .height(200)
      .width('100%')
      .margin({
        top: -150
      })

      Column() {
        Button('Sub')
          .backgroundColor('#ff0a59f7')
          .fontSize(25)
          .width('50%')
          .onClick(() \=\> { _//_ _点击该按钮内容减少，子组件高度降低，不影响其他组件布局_
            if (this.message.length <\= 5) {
              return;
            }
            this.message \= this.message.substring(0, this.message.length / 2);
          })
      }
      .width('100%')
      .height('30%')
      .justifyContent(FlexAlign.End)
      .backgroundColor('#ffd1d1d6')
      .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.BOTTOM\])
    }
  }
}