由于 iframe 导致的双滚动条答案

【问题标题】：Double scroll bar due to iframe由于 iframe 导致的双滚动条
【发布时间】：2018-01-28 02:38:46
【问题描述】：

通过下面的代码，我得到了一个双滚动条——一个用于 iframe 本身，一个用于网页。我正在寻找只有一个滚动条的建议/解决方案，它与整个页面相关联，而不是与 iframe 相关联。我最初的想法是使用 javascript 确定浏览器的大小，然后将其用作 iframe 标记高度。

HTML：

<body>
  <header>
    <div class="container">
       <a href = "index"><img id='logo' src='logo.png' style="width:230px;height:237;"/></a>
       <nav>
          <ul>
            <li><a href="link1">link1</a></li>
            <li><a href="link2">link2</a></li>
            <li><a href="link3">link3</a></li>
          </ul>    
        </nav>
    </div> 
  </header>
  <div class = "iframe-content">
  <iframe src ="https://NeedToScrollToSeeContent.com" width= 100% height= 1000 style="text-align:center" frameborder="0"></iframe>
   </div>
 </body>

CSS：

body{
    margin: 0;
    background: #222;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

header {
    background: #ffffff;
    position: relative;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.iframe-content {
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 0;
}
.iframe-content iframe {
    display: block; 
    width: 100%; 
    height: 100%; 
    border: none;
}

我尝试过的事情：

在html iframe标签中，我取出了height = 1000。这将 iframe 缩小到页面的一小部分。我还用height = 100% 替换了html iframe 标记height = 1000，但仍然遇到同样的问题。
如上所述，我使用 javascript 来确定浏览器的高度，并使用它来确定 iframe 标记内的 height 属性。这确实有效，但它只为 iframe 提供了一个滚动条，而不是整个页面。

请注意，我已经查看了这个 similar question 并将其实现到我的代码中。

【问题讨论】：

标签： html css iframe

【解决方案1】：

（请注意，此解决方案假定您的 iframe 不需要滚动，而不是您希望它滚动但隐藏滚动条。那会更复杂。）

对 HTML 中的 <iframe> 标记做的第一件事就是去掉 height 和 width 属性，然后在 CSS 中定义它们。然后，要摆脱 iframe 内的滚动，请设置 scrolling="no"。这将隐藏滚动条。

<iframe src="webpage.com" frameborder="0" scrolling="no">

在您的 CSS 中，您可以使用视口单位来表示 iframe 的高度，因为百分比是有问题的。 1vw 等于窗口高度的1%。视口单位可让您为响应设置相对高度，同时仍充当固定单位，因此 iframe 不会折叠成真正的短。

.iframe-content iframe {
  height: 70vh; /* or whatever */
}

最后，为了确保这一切正常，摆脱.iframe-content 上的绝对定位。没必要。

html, body {
  height: 100%;
}
body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}
header {
  background: #ffffff;
  position: relative;
  height: 100px;
}
.container {
  width: 80%;
  margin: 0 auto;
}
/* .iframe-content {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
} */
.iframe-content iframe {
  display: block;
  width: 100%;
  height: 70vh;
  border: none;
}
#other-stuff {
  height: 300px;
  background-color: firebrick;
}

<header>
  <div class="container">
    <a href="index"><img id='logo' src='logo.png' style="width:230px;height:237;" /></a>
    <nav>
      <ul>
        <li><a href="link1">link1</a></li>
        <li><a href="link2">link2</a></li>
        <li><a href="link3">link3</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="iframe-content">
  <iframe src="https://en.wikipedia.org/wiki/Main_Page" style="text-align:center" frameborder="0" scrolling="no"></iframe>
</div>
<div id="other-stuff"></div>

【讨论】：