仅用HTML和CSS设置iframe自定义视口的方法求助

云原生阿岚

2026-6-30

问题解决思路

首先你犯了一个基础错误：#dayMenu是锚点定位语法，它对应页面中id="dayMenu"的元素，而不是类名.dayMenu，所以你的代码无法定位到目标类元素。

仅用HTML和CSS可以实现近似效果，但存在局限性，具体方法如下：

方法1：利用锚点+iframe尺寸控制（需目标元素有ID）

如果目标内容所在的元素有专属ID（比如原页面里该元素是<div id="target-id">...</div>），直接修改iframe的src：

<iframe src="https://ustrasku.cz/index.php#target-id" scrolling="no" width="100%" height="650" title="screen1"></iframe>

这样iframe会自动滚动到对应ID的元素位置，再通过设置合适的height值，只显示目标内容区域。

方法2：容器裁剪+iframe偏移（适配类名目标）

如果目标只有类名没有ID，只能通过视觉裁剪实现：

给iframe套一个父容器，设置固定宽高且overflow: hidden：

<div class="iframe-container">
  <iframe src="https://ustrasku.cz/index.php" scrolling="no" width="100%" height="2000" title="screen1"></iframe>
</div>

用CSS调整iframe的位置，把目标.dayMenu元素移到容器可视区域：

.iframe-container {
  width: 100%;
  height: 650px;
  overflow: hidden;
  position: relative;
}
.iframe-container iframe {
  position: absolute;
  top: -XXXpx; /* XXX是目标元素距离页面顶部的像素值，需要手动测量 */
  left: 0;
}

注意：这种方法完全依赖原页面的布局，一旦原页面更新（比如目标元素位置变化），就需要重新调整top值，而且跨域情况下无法用CSS直接获取目标元素的位置，只能手动测量。