Two elements are placed side by side on a webpage. One element, with a fixed size of 100vh, is named .hero-half, while the other element, holding text of varying lengths, is fluid and labeled as .project-details. When the text container extends beyond the image container's height, I want to add a class that limits the height of one of its child elements in order to maintain equal heights between the text and image containers.
HTML:
<div class="project-details left">
<h1 class="project">Title</h1>
<div class="project-summary">
<div class="summary-container">
<p>Several paragraphs go here</p>
</div>
<a class="more" href="#">More</a>
<a class="less" href="#">Less</a>
</div>
</div>
<div class="hero hero-half right" style="background-image: url('/img/placeholder-vert1.jpg')"></div>
The relevant CSS:
.hero-half {
width: 50%;
height: 100vh;
}
.project-details {
width: 50%;
height: auto;
}
.project-summary .summary-container {
overflow: hidden;
&.restrict-height {
.summary-container {
// set max height
max-height: calc(100vh - 615px);
}
}
}
Below is my corresponding JavaScript code:
$(function () {
var bpTab = 1024;
resize = function() {
var winWidth = $(window).width();
var heroHeight = $(".hero-half").outerHeight();
var boxHeight = $(".project-details").outerHeight();
var $box = $(".project-summary");
if ( boxHeight > heroHeight && winWidth > bpTab) {
$box.addClass("restrict-height");
} else {
$box.removeClass("restrict-height");
$box.removeClass("is-expanded");
};
};
$(window).bind("resize orientationchange", function(){
resize();
});
resize();
});
When the project-details div exceeds the height of .hero-half, a class is added to limit the height of one of its children, ensuring the two containers have equivalent heights.
However, there seems to be an issue when resizing the window causing incorrect calculations for odd pixel dimensions. The outerHeight of .project-details appears to fluctuate before and after applying the restrict-height class, resulting in inconsistent height measurements.
Attempts to introduce a timeout delay for adding the class did not resolve the issue. How can the JS code be modified to ensure accurate outerHeight calculations for .project-details before the restrict-height class is applied?
Furthermore, why do odd pixel dimensions impact this scenario?