如何制作一列静态一列可滚动的双列Reveal.js幻灯片？

你的问题出在双列布局容器默认没有明确高度限制，导致右侧滚动容器的height属性无法触发滚动行为。下面是两种可行的解决方案：

方法一：给双列容器添加固定高度（快速修复） #

直接给外层双列布局容器设置高度，同时调整左侧图片和右侧滚动容器的高度属性，让滚动容器相对父容器生效：

---
format:  revealjs
---

## slide 1

This works!

::: {.scroll-container style="overflow-y: scroll; height: 500px;"}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%"}
:::

## slide 2

This works now!

::: {layout-ncol=2 style="height: 500px;"}
<!-- 左侧静态图片设置height:100%填满列高 -->
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%" height="100%"}

<!-- 右侧滚动容器用height:100%相对父容器 -->
::: {.scroll-container style="overflow-y: scroll; height: 100%;"}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%"}
:::
:::

关键改动说明： #

• 给双列容器添加style="height: 500px;"，明确容器的整体高度
• 左侧图片设置height="100%"，让它填满所在列的高度，和右侧滚动容器视觉对齐
• 右侧滚动容器的height从固定值改为100%，基于父容器的高度触发滚动

方法二：自定义CSS类（复用性更强） #

如果需要在多个幻灯片中使用这种布局，可以自定义CSS类，避免重复写内联样式：

---
format:  revealjs
---

<style>
/* 自定义双列滚动布局类 */
.two-column-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 500px;
  gap: 1rem; /* 列之间的间距 */
}

/* 滚动容器样式 */
.two-column-scroll .scroll-container {
  overflow-y: scroll;
  height: 100%;
}

/* 左侧静态图片样式 */
.two-column-scroll img {
  height: 100%;
  object-fit: contain; /* 保持图片比例，避免拉伸 */
}
</style>

## slide 1

This works!

::: {.scroll-container style="overflow-y: scroll; height: 500px;"}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%"}
:::

## slide 2

This works too!

::: {.two-column-scroll}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%"}

::: {.scroll-container}
![](https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D){fig-align="center" width="100%"}
:::
:::

这种方式可以统一控制布局样式，后续需要调整时只需修改CSS部分即可。

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