如何在AMP邮件中为amp-list组件动态设置高度？

AMP邮件里可以实现amp-list根据内容自动调整高度，你之前尝试的heights和container布局不生效是因为AMP邮件的组件限制比普通AMP页面更严格：container布局在邮件环境中不被支持，而heights是用于响应式尺寸缩放，并非基于内容的自动高度适配。

正确的实现方式是结合layout="fixed-height"、auto-height属性和初始height占位：

<amp-list
    height="100px"
    layout="fixed-height"
    auto-height
    src="https://example.com/posts/amp/171?accountId=739628"
>
  <template type="amp-mustache">
    <div class="url-entry" role="listitem">
        {{body}}
    </div>
  </template>
</amp-list>

关键说明： #

• layout="fixed-height"：AMP邮件要求所有组件必须指定明确的布局类型，这是邮件客户端的强制规则
• auto-height：该属性会让amp-list加载完数据后，根据渲染的实际内容自动调整自身高度，覆盖初始设置的height值
• 初始height：作为邮件加载时的占位高度，避免布局跳动，建议设置接近平均内容高度的值

额外注意事项： #

• 确保接口返回的JSON数据符合AMP要求：要么是直接的数组，要么是包含items字段的对象（例如{"items": [/* 回复列表数据 */]}）
• 回复内容里的元素要避免使用超出邮件客户端支持的样式或组件，比如过大的图片、复杂嵌套结构，否则可能影响自动高度的计算准确性
• 测试主流邮件客户端（Gmail、Outlook、Apple Mail等）的兼容性，部分客户端对auto-height的支持可能存在细微差异

内容的提问来源于stack exchange，提问作者Omer Nave