Question

我要在没有滚动条的情况下使此代码正常工作。并仍显示来自iframe中链接的所有内容。

   <html>
      <head>
        <title>How to make Iframe Responsive</title>
          </head>
             <body>
                <div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
              <iframe width="100%" height="100%" src="https://www.inflatableoffice.com/quotes/quoteme.php name=Starwalk+of+Dallas%2C+LLC" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
             </div>
           </body>
      </html>

我希望它不显示侧边栏。

Answer 1

向iframe代码添加scrolling="no"属性。

<iframe scrolling="no" ...></iframe>

Answer 2

在包装器div上，添加属性overflow:hidden;。当然，这将隐藏垂直和水平溢出。您可以使用overflow-x:hidden;或overflow-y:hidden;控制任何一个。试试这个：

   <html>
      <head>
        <title>How to make Iframe Responsive</title>
          </head>
             <body>
                <div style="overflow:hidden; padding-bottom:56.25%; position:relative; display:block; width: 100%">
              <iframe width="100%" height="100%" src="https://www.inflatableoffice.com/quotes/quoteme.php name=Starwalk+of+Dallas%2C+LLC" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
             </div>
           </body>
      </html>

如何使iframe响应

2 个答案: