Quarto RevealJS双列布局中iframe高度压缩问题的解决方法

核心原因 #

RevealJS的.columns和.column容器默认无明确高度设置，iframe的百分比高度（如height="1000%"）无法基于无固定高度的父元素计算，导致高度被压缩；同时幻灯片本身的默认垂直内边距也会进一步限制内容可用高度。

解决方案 #

方法1：为列和iframe设置固定高度（简单直接） #

直接给列容器添加style属性指定固定高度，同时将iframe高度设为100%以填充列空间：

:::: {.columns}
::: {.column width="50%" style="height: 600px;"}
<iframe src="test.html" width="100%" height="100%" frameborder="0"></iframe>
:::
::: {.column width="50%"}
TEST
:::
::::

方法2：用CSS实现自适应幻灯片高度 #

通过自定义CSS让列容器占满幻灯片可用高度，再让iframe填充列空间：

1. 在文档开头的YAML配置中引入自定义样式文件：

---
title: "Untitled"
format: 
  revealjs:
    embed-resources: true
    css: custom.css
---

2. 创建custom.css文件，添加如下样式：

/* 让双列容器占满幻灯片可用高度（减去标题和内边距高度） */
.columns {
  height: calc(100vh - 120px);
}

/* 让列元素占满容器高度 */
.columns .column {
  height: 100%;
}

/* 强制iframe填充列的高度 */
.columns iframe {
  height: 100% !important;
}

3. 保持双列布局代码不变即可：

:::: {.columns}
::: {.column width="50%"}
<iframe src="test.html" width="100%" frameborder="0"></iframe>
:::
::: {.column width="50%"}
TEST
:::
::::

方法3：调整幻灯片基础配置（可选） #

若需减少幻灯片内边距对高度的影响，可在YAML中修改幻灯片高度和边距：

---
title: "Untitled"
format: 
  revealjs:
    embed-resources: true
    slide-height: 800px
    margin: 0.05
---

注意事项 #

• 避免使用1000%这类过大的百分比高度，父元素无固定高度时，百分比高度会失效并导致布局异常。
• 添加frameborder="0"可去除iframe默认边框，优化视觉效果。

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