HTML iframe 仅显示部分页面 - Html

在 HTML 中，可以使用 iframe 元素来嵌入其他页面。但是有时我们只想显示其他页面的一部分内容，而不是整个页面。这个问题可以通过设置 iframe 的高度和使用 CSS 剪裁来解决。

设置 iframe 高度

要仅显示 iframe 中的一部分页面，首先需要将 iframe 的高度设置为所需高度。例如，如果要仅显示页面顶部的菜单，则可以将 iframe 高度设置为菜单的高度。

<iframe src="page.html" height="50"></iframe>

在上面的示例中，iframe 的高度设置为 50 像素。这将在页面中显示 iframe，并仅显示嵌入页面的顶部 50 像素。

使用 CSS 剪裁

虽然设置 iframe 的高度可以显示所需部分的页面，但是这种方法不适用于动态内容或大小会变化的页面。此时，使用 CSS 剪切可能更为适合。

要使用 CSS 剪切，需要设置 iframe 的高度和宽度，并将 overflow 属性设置为 hidden。然后，使用 CSS 定位和剪切来显示所需部分的页面。

<style>
    .iframe-wrapper {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
    }
    .iframe-wrapper iframe {
        position: absolute;
        top: -100px;
        left: 0;
        width: 100%;
        height: 500px;
    }
</style>

<div class="iframe-wrapper">
    <iframe src="page.html"></iframe>
</div>

在上面的示例中，我们创建了一个名为 iframe-wrapper 的容器，并将其高度设置为所需高度。然后，我们将 iframe 的位置设置为绝对位置，并使用 top 属性将其移至所需部分的页面。最后，我们将 iframe 剪切为所需宽度和高度，以显示嵌入页面的部分内容。

总结

HTML iframe 元素允许在页面中嵌入其他页面。要仅显示页面的一部分内容，可以通过设置 iframe 的高度和使用 CSS 剪切来实现。这些方法都可以帮助您实现所需的效果，并根据需要修改和调整。