Question

我试图将iframe放入网页，但无论我尝试放入iframe属性还是网站构建器的自定义CSS部分（或者我尝试添加多少次！重要）对于从宽度到右边距的任何事情，我无法使iframe向右延伸，而不是页面的预设宽度。

以下是我正在使用的页面和iframe的示例:(编辑：不再可用）

我需要将脚本/ iframe足够宽以显示搜索区域。复制和粘贴我尝试设置的代码和属性似乎毫无意义，因为我所做的一切似乎都没有任何效果，只是为了表明我不知道我在做什么，这里＆＃39;我的iframe代码：

<iframe id="idxFrame"  style="padding:0; margin:0; padding-top: 0px; overflow-x:auto;
width:1000px!important; border:0px solid transparent; background-color:transparent;
max-width:none!important; right-margin:-200px!important" frameborder="0" 
scrolling="on" src="http://www.themls.com/IDXNET/Default.aspx?wid=8MSsp7Pf9eI55yjkDuB%2blX5awn7LnnVXh5PNYhq2ImAEQL" 
width="1200px" height="900px">
</iframe>

＆＃34;网站建设者＆＃34;我被迫用来制作这些类型的页面令人愤怒，但它确实有一个＆＃34;自定义CSS＆＃34;我可以输入其他CSS信息的区域。有什么我可以通常用来将iframe设置为自己的宽度吗？

Answer 1

它被切断的原因是因为页面结构中有一些父容器具有属性overflow: hidden;，以确保太宽的内容不会破坏布局。

我不知道您的系统是如何工作的，但您可以尝试将以下代码添加到自定义CSS区域：

.LayoutContainer {
    overflow: visible !important;
}

.LayoutContainer div div {
    overflow: visible !important;
}

请注意，它会破坏您的布局，并在较小的屏幕上生成水平滚动条。

<强>更新

以上CSS会影响您的整个网站。如果您真的想要使用它，请使用以下CSS来确保只有此页面受到影响。系统为每个页面生成一个唯一的ID号，我们正在利用它。

body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer {
    overflow: visible !important;
}

body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer div div {
    overflow: visible !important;
}

Answer 2

我相信您的问题是，当您应该使用right-margin时，您正在使用margin-right

Answer 3

以下是我修改后的内容，以下是截图：http://screencast.com/t/R2VeIAnNJVd

.LayoutContainer { overflow: visible; }
.LayoutContainer div div { overflow: visible !important; }

如上所述，如屏幕截图所示，您可以看到iframe延伸到您的内容包装器之外。

覆盖iframe宽度的CSS属性

3 个答案: