使 twitter 小部件与 DIV 高度相同答案

【问题标题】：Make twitter widget same height as DIV使 twitter 小部件与 DIV 高度相同
【发布时间】：2016-06-14 15:33:31
【问题描述】：

我正在尝试使我的 twitter 小部件（在它自己的 div 中）与另一个 div（称为 mainslider）具有相同的高度。我用 JavaScript 和 JQuery 尝试了一些东西，但我对此并没有太多经验。我的代码摘录如下：

    <div class="mainslider" id="mainsliderid">
    (SLIDER CODE HERE THAT I REMOVED)
</div>
<script>
var twitterheight = $('mainsliderid').height();
</script>
<div class="maintwitter">
    <a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="704258053198254080" height="twitterheight" width="100%">Tweets by @twitter</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>
</div>

【问题讨论】：

又快又脏：jQuery('#maintwitter').height(jQuery('#mainslider').height()); - 更好的是获取两者的高度，并将它们都设置为最大高度。
好像不行，推特时间线不能设置为100%的高度。唯一的方法似乎是在 'LINK HERE
“不起作用”，或者没有将高度设置为您想要的？ a 元素是一个小按钮。此外，与在 div 中运行的脚本相反，查看呈现的 HTML 会非常有用。
RENDERED HTML twitter 小部件在此处的默认高度为 600 像素。
嗨 - 不，我的意思是 HTML - 不是它看起来的样子。没有 HTML，我们不知道可以访问/修改/大小的标记。

标签： javascript jquery html css twitter

【解决方案1】：

所以我自己解决了这个问题，而且非常简单。由于我的幻灯片的性质，它的高度与宽度成正比。因为我使用屏幕宽度的比例来更改 twitter 和幻灯片宽度，所以我可以使用单位“VW”，它是屏幕宽度的 1%，只需将其乘以正确的值。现在工作正常。

【讨论】：