Html 在 TD 内显示 iframe

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6522846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:19:39  来源:igfitidea点击:

display an iframe inside a TD

htmlcss

提问by van

My page layout is structured in tables (I know this is not ideal - I inherited it).

我的页面布局以表格的形式构建(我知道这并不理想 - 我继承了它)。

I am trying to display an iframe in a div with the following code inside a table cell () as below:

我正在尝试在表格单元格 () 中使用以下代码在 div 中显示 iframe,如下所示:

<td class="style24" style="width: 800px">
<div id='outerdiv '>
<iframe src="www.google.com" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>

The issue is the iframe causes the table cell to grow and then pushes the content on the right of the page off the page!

问题是 iframe 导致表格单元格增长,然后将页面右侧的内容推离页面!

Is there a way to limit the size of the iframe that's displayed that won't make the table cell grow? Limiting the width of the iframe doesn't seem to have an effect, as soon as the div content is placed in the td the effect occurs.

有没有办法限制显示的 iframe 的大小,而不会使表格单元格增长?限制 iframe 的宽度似乎没有效果,只要将 div 内容放在 td 中就会出现效果。

回答by Marc Uberstein

You can try adding the width and/or height to the iframe and #outerdiv(add overflow-x to the #outerdivas a failsafe):

您可以尝试将宽度和/或高度#outerdiv添加到 iframe 和(添加溢出-x#outerdiv作为故障保护):

<td class="style24" style="width: 800px">
<div id='outerdiv' style="width:800px; overflow-x:hidden;">
<iframe src="www.google.com" width="800" frameborder="0" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>

回答by Traveling_Monk

place an css overflow attribute on the outerdiv, you might also declare the width of the iframe

在outerdiv上放置一个css溢出属性,你也可以声明iframe的宽度

回答by Jedediah

This is working for me, but without seeing styles associated with #outerdiv, .style24, and #inneriframe, it's a little difficult to tell if this would work for you or not.

这对我有用,但没有看到与#outerdiv、.style24 和#inneriframe 相关的样式,很难判断这是否适合您。

#outerdiv {
    width: 800px;
    height: 600px;
}
#inneriframe {
    width: 100%;
    height: 100%;
}