Our website displays a list of items in table format. The number of items varies daily, affecting the height of the table. A vertical bar next to the table should resize based on the table's height each day.
The HTML structure we use is as follows:
<div class="tvGuide">
<div class="showsBarTitle"></div>
<div class="tvGuideContents">
<!--The contents are dynamically generated with PHP-->
<div class="guideSlot">
<!-- one guideSlot per item -->
</div>
</div>
<div class="clearFloat"></div>
</div>
We're using jQuery to retrieve the CSS height of '.tvGuideContents' and apply that value to '.showsBarTitle'.
var playlistHeight = $('.tvGuideContents').css('height');
$('.showsBarTitle').css('height', playlistHeight);
The issue we encounter is that in Chrome, 'playlistHeight' returns a higher value than the actual height. For example, if '.tvGuideContents' has a height of 1932px, 'playlistHeight' shows as 2012px, resulting in a taller title bar. However, when checking in the Chrome console, the correct height of 1932px is displayed. This discrepancy doesn't occur in Firefox, where the resizing works correctly.
We appreciate any insights or assistance you can provide.