在右边放一个 iframe

Question

所以我想为一个页面制作一个 iframe，该页面将显示一系列茶和凉茶，并且我希望左侧的选项在另一个 iframe 中。不过，我已经很久没有这样做了，而且我以前只用 DreamWeaver 做过（我没有经验，所以我遵循了老师的教程），所以软件生成了大部分代码，真的。有人可以帮我吗？现在，这是 iframe 的代码以及横幅：

    <div class="container">
        <img src="images/bannersite.png" alt="Banner" style="width:100%;">
        
        <div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
            <span style="color: #B3D1B3;">Ma</span><span style="color: #404040;">Thé</span>
        </div>
    </div>

    <iframe src="accueil.html" style="width: 99.8%;">
    </iframe>

它是这样的：

如您所见，下方有一个滚动条，这是因为出于某种原因，iframe 决定它会在横幅右端的左侧继续，而我不希望这样。我希望 iframe 和横幅都适合整个屏幕。

这是我想做但不知道如何做的事情：

感谢任何愿意帮助我的人。

Answer 1

请注意，iframe 不适合 SEO。最好使用 java 脚本或 jquery 驱动的代码片段。谷歌和其他人不信任 iframe，使您的网站评级下降很多。

Answer 2

看看这个 codepen，我认为它可以满足您的需求。

https://codepen.io/larrytherabbit/pen/mdPGzdm

我稍微编辑了您的代码，请阅读我为您制作的 cmets，以便更好地理解新的代码行。有一个 HTML 代码和一个适用于它的 CSS 代码，以及类（它们以“.”开头）

HTML

<div class="container"> <!-- this is the container for the picture and the "MaThé" text -->
        <img src="https://images.all-free-download.com/images/graphicthumb/sunflower_background_03_hd_picture_165827.jpg" alt="Banner">
        <div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
            <span style="color: #B3D1B3;">Ma</span>
            <span style="color: #404040;">Thé</span>
        </div>
</div> <!-- top header container closes here -->

<div class="flex-container"> <!-- this is the container for the sidebar and the iframe on the right -->
  <div class="sidebar">
    <button>Button</button>
    <button>Button</button> 
    <button>Button</button>
  </div>
<iframe src="https://www.youtube.com/embed/sJIjIMMIoSw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS

.container img {
  width:100%;max-height:250px;
}

.bigtxt {
  font-size:50px;
}

.flex-container { /* the display attribute set to flex creates a "flexbox" display, please see here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
  display:flex;width:100%;
}

.sidebar { /* this container is also set to flex, but here we change the flex-direction to column for the buttons to display in a column */
  display:flex;flex-direction:column;height:300px;justify-content:center;width:30%;align-items:center; /* giving a width of 30% to the sidebar, it will fill 30% of the available space, which is 100% of the window width as defined above */ /* by setting align-items and justify-content to "center" the buttons place themselves in the middle of the sidebar */
}

.sidebar button {
  margin:30px 0;max-width:100px; /* giving a bottom and a top margin ofo 30px to the buttons to space them apart */
}

iframe {
  width:70%; /* here we simply set the width of the iframe to the remaining space which is 70% of the 100% width of the .flexbox container */
}