未获得用户同意时，如何消除amp-consent相关元素的空白高度？

针对你遇到的两个AMP consent相关问题，我整理了实操性很强的解决方案：

1. 调整amp-consent未获得同意时的关闭框高度 #

amp-consent的弹窗UI支持完全自定义，你可以通过自定义模板精确控制关闭框（或整个弹窗）的高度表现：

• 先在amp-consent组件内嵌入自定义模板，按需设置弹窗的基础样式：

<amp-consent id="siteConsent" layout="nodisplay">
  <template type="amp-consent">
    <div class="consent-overlay">
      <div class="consent-dialog" style="max-height: 75vh; overflow-y: auto;">
        <!-- 这里放你的同意提示文案、选项 -->
        <button on="tap:siteConsent.reject">拒绝所有</button>
        <button on="tap:siteConsent.accept">同意所有</button>
      </div>
    </div>
  </template>
</amp-consent>

• 再通过CSS针对未同意状态下的弹窗做高度调整，比如用户未触发弹窗时自动隐藏：

/* 未获取同意且弹窗未激活时，将高度设为0隐藏 */
amp-consent:not([consent-given]):not([consent-dialog-visible]) .consent-dialog {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* 用户触发弹窗后，展开到预设高度 */
amp-consent[consent-dialog-visible] .consent-dialog {
  max-height: 75vh;
}

2. 消除拒绝同意后amp-ad的空白占位 #

当用户拒绝广告与追踪后，带data-block-on-consent的amp-ad会保留预设高度产生空白，这里有两种靠谱的解决方式：

方法一：条件渲染（推荐） #

用AMP的amp-if组件，只有用户同意广告权限时才渲染amp-ad元素，拒绝时不渲染自然不会有空白：

<amp-if expr="consentState.advertising === 'granted'">
  <amp-ad
    width="300"
    height="250"
    type="google-admanager"
    data-ad-unit-path="/your-ad-unit-path"
    data-block-on-consent
  >
  </amp-ad>
</amp-if>

方法二：CSS直接隐藏 #

给amp-ad加个自定义类名，然后根据amp-consent的状态选择器隐藏元素：

<amp-ad
  class="consent-dependent-ad"
  width="300"
  height="250"
  type="google-admanager"
  data-ad-unit-path="/your-ad-unit-path"
  data-block-on-consent
>
</amp-ad>

对应的CSS：

/* 用户拒绝广告追踪时，隐藏对应的广告元素 */
amp-consent[consent-state="rejected"] .consent-dependent-ad {
  display: none;
}

这种方法无需额外组件，改动小，适合快速适配现有代码。

内容的提问来源于stack exchange，提问作者Christian Felix