如何裁剪iframe底部100px并消除clip-path导致的白边？

我要嵌入一个无法控制内容、高度可变的iframe，需要裁剪掉它底部的100px。目前用的代码如下：

<iframe id="booking-content" title="booking-content"
        src="https://outlook.office365.com/owa/calendar/SDRRetailConsulting@sdrretail.com/bookings/"
        scrolling="no" allowfullscreen="allowfullscreen"
        style="width: 1024px; height: 100vh; clip-path: inset(0px 0px 100px 0px);
               overflow: hidden; margin:0 auto; border:none;">
</iframe>

但使用clip-path后，iframe底部出现了100px的白边，截图可见该空白区域。

我制作了可运行示例复现问题，另有相关问题可供参考。求解决办法，谢谢！

放弃用clip-path裁剪，改用容器包裹iframe的方案，彻底解决白边问题：

实现思路 #

用一个div容器限制可见高度，让iframe的高度超出容器，超出部分被容器的overflow: hidden隐藏，这样既裁剪了底部100px，又不会留空白。

代码示例 #

<div style="width: 1024px; height: calc(100vh - 100px); overflow: hidden; margin: 0 auto;">
  <iframe id="booking-content" title="booking-content"
          src="https://outlook.office365.com/owa/calendar/SDRRetailConsulting@sdrretail.com/bookings/"
          scrolling="no" allowfullscreen="allowfullscreen"
          style="width: 100%; height: 100vh; border: none;">
  </iframe>
</div>

原方案问题原因 #

clip-path只是裁切元素的可见区域，但iframe本身的占位高度还是100vh，裁切后空出来的100px区域会显示页面背景色（默认白色），所以出现了白边。而容器包裹的方式直接限制了展示区域的高度，超出部分直接隐藏，不会留下空白。

另一种简化写法：给iframe设置margin-bottom: -100px，同时给父容器加overflow: hidden，原理和上面一致，但容器包裹的方式更直观易维护。

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