Javascript 如何使iframe具有响应性_Javascript_Html_Css

Javascript 如何使iframe具有响应性

javascript html css

Javascript 如何使iframe具有响应性,javascript,html,css,Javascript,Html,Css,我不知道，我让这个代码在没有滚动条的情况下工作。并且仍然在iframe中显示来自链接的所有内容 <html> <head> <title>How to make Iframe Responsive</title> </head> <body> <div style="padding-bottom:56.25%

我不知道，我让这个代码在没有滚动条的情况下工作。并且仍然在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>


如何使Iframe具有响应性

我希望它不带边栏显示。

向iframe标记添加

scrolling=“no”

属性

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

在包装器

div

上添加属性

溢出：隐藏。这当然会隐藏垂直和水平溢出。您可以使用overflow-x:hidden控制任意一个或溢出-y：隐藏。试试这个：
   <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具有响应性
可能的重复会删除滚动条，但某些内容会丢失在右侧的正文中。我不明白你还有什么想法。删除了卷轴，但底部的内容是gone@OnomeMineAdams正如预期的那样，溢出就可以了。这就是为什么我对你的答案投了赞成票：）@onomeineadams然而，如果OP在CSS中为iframe和包装器设置了特定的大小，那么在某些情况下这可能是一个优势。我不确定是否所有浏览器都支持scrollbar
属性，因此就我所知，这种方法对所有浏览器都更有效。