将 iframe 放在博客中并使其正确适合

Place an iframe in a blog and make it fit correctly

本文关键字：iframe      更新时间：2023-09-26

好的，所以我为我在房地产行业的妻子做了一个博客。我熟悉html和css，但我似乎碰壁了。我已经研究了一段时间，想要一些方向。我使用 css 删除了侧栏，但不知何故我错过了一些东西，无法弄清楚如何扩展中心柱部分以使其成为全宽。这是第一个问题，第二个问题是让iframe适合，这可能与第一个问题有关。所以网站是：http://tamapabayrealestate.blogspot.com/p/blog-page_79.html我用来获取它的代码是：

<style>
#sidebar-wrapper, #midsidebar-wrapper, #main-column-right-sections, #sidebar-left-1, 
#sidebar-right-1, #main-column-left-sections,.gapad2, 
 .blog-pager,.fauxcolumn-left-outer, .fauxcolumn-inner, 
 .post-header-line-1, .post-footer { display:none !important;} 
#post-body-456672082127024910 { width:98%!important;} 
 .body .content-inner { width:98%!important; }
</style>
<iframe src="http://mfr.mlsmatrix.com/Matrix/Public/AWP/gloriaalfonso/?L=1&ap=SCH" 
      style="border:0px #000000 none;" 
       name="My iFrame" 
  scrolling="yes" 
frameborder="1" 
marginheight="px" 
marginwidth="0px" 
     height="850px" 
     width="800px"></iframe>`

非常感谢所有帮助。提前谢谢。

部分问题似乎是".main-inner .columns"有填充。尝试：

.main-inner .columns {padding:0;}
我认为

问题可能是您基本上用这个.body .content-inner { width:98%!important; }限制了博客内容的最大宽度，但随后您正在为 iFrame 定义确切的宽度（宽度 = 800px）。结果是你的iFrame被切断了，因为它比博客的正文宽。

您似乎可能会遇到其他问题，但是：尝试将iFrame的宽度更改为100%（相对于850px），看看是否可以解决部分问题。如果这不起作用，还要在后面添加position: relative; border:0px #000000 none;用空格分隔，但仍在双引号中。

如果它按照我认为的那样做，它将解决宽度问题，但最终看起来扭曲（对于它突然变得多宽来说太高了）。然后，您可以将高度更改为90vw（或任何数字给您适当的纵横比！90可能不是正确的数字...我的数学让我失败了，所以你可以尝试一下）。

缺少很多上下文，所以老实说，这可能会使复杂化而不是修复。只需仔细跟踪您的操作（或者更好的是：备份文件！），并在事情失控时撤消我建议的所有更改:)

相关文章：