Question

使用下面的代码，我得到一个双滚动条 - 一个用于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缩小到页面的一小部分。我还在html iframe标记height = 1000中替换为height = 100%，但仍然遇到了同样的问题。
如上所述，我使用javascript来确定浏览器的高度，并使用它来确定iframe标记中的height属性。这确实有效，但它只给了我一个iframe的滚动条，而不是整个页面。

请注意我已查看此similar question并将其实施到我的代码中。

Answer 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>

由iframe引起的双滚动条

1 个答案: