在博客中放置一个 iframe 并使其正确适合

Question

好的，所以我为从事房地产行业的妻子创建了一个博客。我对html和css很熟悉，但我好像碰壁了。我已经研究了一段时间了，想要一些指导。我使用 css 删除了边栏，但不知何故我错过了一些东西，无法弄清楚如何扩展中心 post 部分以使其成为全宽。就是这样，第二个问题是让 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>`

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

Answer 1

我认为问题可能在于您实际上已经使用 .body .content-inner { width:98%!important; } 限制了博客内容的最大宽度，但随后您又为 iFrame 定义了准确的宽度（宽度 = 800 像素）。结果是您的 iFrame 被截断了，因为它比博客正文还宽。

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

如果它按照我的想法行事，它会解决宽度问题，但最终看起来会变形（对于突然变宽的宽度来说太高了）。然后，您可以将高度更改为 90vw（或任何给您合适纵横比的数字！90 可能不是正确的数字……我的数学不及格，所以您可以尝试一下）。

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

Answer 2

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

.main-inner .columns {padding:0;}

在博客中放置一个 iframe 并使其正确适合

Place an iframe in a blog and make it fit correctly

javascript

html

css

iframe

blogger