AEM编辑模式下元素出现无限高度问题求助

AEM编辑模式会自动注入工具栏、编辑容器等额外元素，和你设置的height:100vh冲突，才会导致页面无限拉长。直接用以下几种方法解决：

方法1：用AEM编辑模式专属CSS类覆盖样式 #

AEM在编辑模式下会给<body>添加cq-editor-edit类（不同版本可能略有差异，自己F12检查下页面根元素的类），针对这个类修改Banner的高度：

/* 发布/预览模式下的正常样式 */
.html-banner {
  height: 100vh;
}

/* 编辑模式下强制调整高度 */
body.cq-editor-edit .html-banner {
  height: auto;
  max-height: 80vh; /* 限制最大高度，避免占满整个编辑窗口 */
  overflow-y: auto; /* 内容过多时显示滚动条 */
}

方法2：用JS自动检测编辑模式调整样式 #

如果CSS覆盖不够灵活，用JS判断当前是否为编辑模式，动态修改Banner样式：

const isEditMode = document.body.classList.contains('cq-editor-edit');

if (isEditMode) {
  document.querySelectorAll('.html-banner').forEach(banner => {
    banner.style.height = 'auto';
    banner.style.maxHeight = '80vh';
  });
}

方法3：调整组件编辑配置（可选） #

在组件的cq:editConfig里添加编辑模式专属样式选项，让作者可以手动切换：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:Component"
          cq:editConfig="{
              'cq:styles': [
                  {
                      'text': '全屏模式',
                      'className': 'html-banner'
                  },
                  {
                      'text': '编辑紧凑模式',
                      'className': 'html-banner-edit'
                  }
              ]
          }">
</jcr:root>

然后给html-banner-edit类设置height:auto或固定最大高度，编辑时切换样式即可。

核心思路就是区分编辑和发布环境，给Banner应用不同的高度规则，避免100vh和AEM编辑UI冲突。

内容的提问来源于stack exchange，提问作者Sudhakar Lahane