HTML/CSS - 获取子 iframe 以使用父容器的宽度（Twitter 小部件）答案

【问题标题】：HTML/CSS - Get child iframe to use width of parent container (Twitter widget)HTML/CSS - 获取子 iframe 以使用父容器的宽度（Twitter 小部件）
【发布时间】：2012-09-16 06:38:27
【问题描述】：

我之前使用过twitter widget 来嵌入推特时间线。您可以选择设置小部件的高度，并且宽度总是刚刚扩展到父 div 的宽度。然而，在当前情况下，它并没有扩大。任何人都可以使用浏览器网络检查器（萤火虫等）来检测为什么这个特定的 iframe 将其宽度设置为 220px，而不是扩展到它的父 div 宽度？

http://m.qwiet.com/（点击“推文”）页面加载完毕。

这是我用来嵌入时间线的 HTML：

<a class="twitter-timeline"  href="https://twitter.com/user" data-widget-id="248169276782018560">Tweets by @user</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

注意这里没有提到宽度参数。这已经让我好几天了。

【问题讨论】：

标签： html css iframe twitter widget

【解决方案1】：

没有宽度参数是什么意思？看代码。它清楚地显示width-"220px"，当您更改它时，宽度会发生变化。

【讨论】：

是的，但是如果您查看我在上面发布的 HTML，您会发现我没有指定宽度。那 220px 来自我无法控制的 iframe 脚本。其他时候我已经这样做了，例如，如果包含的 div 的宽度为 480px，则宽度为 480px。在这种情况下，包含 div 的宽度为 100%。
好的，那你试过什么？您甚至阅读过文档吗？
是的。来自文档：“默认情况下，小部件将缩小到页面中其父元素的宽度。例如，如果您将嵌入代码粘贴到 300 像素宽的 div 中，时间线本身将是 300 像素宽”。跨度>
您是否尝试过让父 div 具有以像素为单位的数值而不是 100%？文档明确指出您只能将像素值用于小部件的宽度.....或者您可以随时通过添加代码自己设置宽度。
是的，我一直在搞砸。如果我将它设置为 280 像素，它在设备上看起来不错，在纵向模式下。但是如果你转向横向，它显然会保持 280 像素并且只水平填充一半的屏幕，所以将父容器的宽度设置为某个百分比会很好。但我想我必须忍受它。