使 Twitter 小部件的高度动态与其父 div 的高度成比例答案

【问题标题】：Make Twitter Widget's Height Dynamic Proportional to its Parent Div's Height使 Twitter 小部件的高度动态与其父 div 的高度成比例
【发布时间】：2014-12-08 19:38:07
【问题描述】：

我一直在我的图书馆管理系统中使用 twitter 小部件。我想让 twitter 小部件的高度动态化，因为它的高度是固定的，并且可以在创建小部件之前在其配置中设置。

我将如何通过 css 做到这一点？

这是小部件代码，我从 twitter 得到的：

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

【问题讨论】：

标签： html css twitter widget twitter-widget

【解决方案1】：

这不是通过 CSS 完成的，但您可以直接在小部件 HTML 中指定高度：

<a height="450" class="twitter-timeline" href="https://twitter.com/vhakhikhang" data-widget-id="520463403060432896">Tweets by @vhakhikhang</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

这将覆盖在小部件设置期间指定的高度。最小高度为 200 像素。请参阅documentation 了解更多信息。

这不是真正动态的。如果您不确定父元素的高度，则需要使用 JavaScript 对其进行测量，然后输出如上所示的锚标记，但使用检索到的高度值。

【讨论】：