如何在不滚动的情况下将多个iframe放入一个页面？

基础概念

iframe 是 HTML 中的一个元素，用于在当前页面中嵌入另一个 HTML 文档。它允许你在一个页面中显示另一个页面的内容，类似于一个窗口。

类型

iframe 主要有以下几种类型：

静态 iframe：嵌入的内容是固定的，不会随主页面的变化而变化。
动态 iframe：嵌入的内容可以根据主页面的状态或用户的操作进行变化。

应用场景

嵌入第三方内容：如嵌入 YouTube 视频、Google 地图等。
模块化设计：将页面分成多个独立的模块，每个模块使用一个 iframe。
跨域内容嵌入：通过 iframe 可以嵌入不同域名的内容。

问题与解决方案

问题

如何在不滚动的情况下将多个 iframe 放入一个页面？

原因

默认情况下，iframe 的高度和宽度是固定的，如果内容过多，会导致 iframe 内部出现滚动条。如果多个 iframe 都有滚动条，会影响用户体验。

解决方案

固定高度和宽度：为每个 iframe 设置固定的高度和宽度，确保它们不会超出主页面的边界。
使用 CSS 控制布局：通过 CSS 的 display: flex 或 display: grid 属性来控制 iframe 的布局，使其在主页面中均匀分布。
动态调整高度：通过 JavaScript 动态调整 iframe 的高度，使其适应内容的大小。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Iframes</title>
    <style>
        .iframe-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
        }
        .iframe-container iframe {
            width: 45%;
            height: 45vh;
            border: none;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe src="https://example.com/page1"></iframe>
        <iframe src="https://example.com/page2"></iframe>
    </div>
</body>
</html>