Anki卡片内嵌iframe网页高度无法占满仅显示10%高度问题咨询

云上老周

2026-8-28

问题原因

iframe高度显示异常是两个CSS+HTML规则共同导致的：

CSS百分比高度生效的前置要求是所有层级的父元素都有明确可计算的固定高度，不能是内容自适应的auto值。你当前的模板里，Anki卡片渲染的根节点html、body、卡片外层容器都没有设置100%高度，高度参考链断层，外层写的height:100%实际会被解析为自适应内容高度，无法给子元素提供高度参考。
iframe原生的width/height属性只支持无单位的像素值，你写的height="100em"属于无效属性值，渲染内核会直接 fallback 到浏览器默认的iframe高度（约150px），直接导致显示区域被压缩到很小一块。

修复方案

方案1：自适应100%高度（占满卡片剩余空间）

先补全所有父容器的高度基准，再修正iframe的高度写法，消除默认边框留白。

卡片背面模板完整代码

{{FrontSide}}
<hr id=answer>
<style>
/* 补全全链路高度基准，清除默认边距 */
html, body, .card {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
<div style='height:100%; font-family: Arial; font-size: 40px;text-align: center;background-color: white; box-sizing: border-box;'>
{{Back}}
</div>

卡片Back字段代码

<div style="font-size:40px; height: calc(100% - 120px); box-sizing: border-box;">
கைவிடு<br><br>
<iframe src="https://www.dictionary.com/browse/Abandon" width="100%" height="100%" style="border:none;"></iframe>
</div>

方案2：固定高度（更稳定无兼容问题）

如果不需要严格自适应占满，直接给iframe设置固定像素高度即可，不需要父元素有高度基准，不会出现高度塌缩问题，适配成本更低：

<div style="font-size:40px;">
கைவிடு<br><br>
<iframe src="https://www.dictionary.com/browse/Abandon" width="100%" height="800" style="border:none;"></iframe>
</div>