CSS Same Height for Tabbed Sections - html

Question

Please note the following HTML for a Tabbed display (for an option page):
I would like to maintain the same height as tab1 for tab2 and tab3
<article>
<nav> <!-- content --> </nav>
<section id="tab1"> <!-- content --> </section>
<section id="tab2"><iframe src=""></iframe></section>
<section id="tab3"><iframe src=""></iframe></section>
</article>
tab1 always loads first with display: block; and both tab2 & tab3
have display: none;
tab1 has variable content, so it is not practical to set a fixed height or min-height
Setting display: flex; on article interferes with nav
Setting display: flex; also interferes with display: none;
nav can not be moved to outside article
Both tab2 & tab3 display with shorter height which results in unsightly resizing of the overall box
N.B. The HTML is used in a Firefox/Chrome Extension's Options page, and NOT a web page. Since Chrome uses Panels and Firefox uses Options page, Pixel based solutions might not work as expected. There might also be Firefox/Chrome specific solutions.

Answer 1

To have dynamic equal height elements without script, you could use CSS Flexbox.
Here I added a couple of input's and label's to do the actual tabbing, and an extra div as a wrapper for the section's.
By setting overflow: hidden on the article, give the div the size times amount of section's, one can simply slide it back and forth, sideways, to achieve your requirements.
Fiddle demo
Here done as a Stack snippet with a twist, animated the slide and, as commented, with 4 sections
article {
overflow: hidden;
}
article > input {
display: none;
}
article nav {
width: 100%;
background: lightgreen;
}
article nav label {
display: inline-block;
padding: 3px 10px;
}
article > div {
display: flex;
width: 400%;
transition: transform 1s; /* added to animate the slide */
}
article section {
width: 100%;
padding: 3px 10px;
box-sizing: border-box;
background: lightblue;
}
article input[id="tab1"]:checked ~ div {
transform: translateX(0);
}
article input[id="tab2"]:checked ~ div {
transform: translateX(-25%);
}
article input[id="tab3"]:checked ~ div {
transform: translateX(-50%);
}
article input[id="tab4"]:checked ~ div {
transform: translateX(-75%);
}
<article>
<!-- added inputs and labels for this demo -->
<input type="radio" name="radiotabs" id="tab1" checked>
<input type="radio" name="radiotabs" id="tab2">
<input type="radio" name="radiotabs" id="tab3">
<input type="radio" name="radiotabs" id="tab4">
<nav>
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
<label for="tab4">Tab 4</label>
</nav>
<!-- this extra wapper is needed to solve this without script -->
<div>
<section id="stab1">
Section 1
</section>
<section id="stab2">
Section 2
<br>this has more content
<br>this has more content
<br>this has more content
</section>
<section id="stab3">
Section 3
</section>
<section id="stab4">
Section 4
</section>
</div>
</article>

Answer 2

You could do it easily with a bit of jquery like this:
$(document).ready(function() {
$(window).resize(function() {
$(".div1").height("auto");
$(".div2").height("auto");
$(".div3").height("auto");
var height = Math.max($(".div1").outerHeight(), $(".div2").outerHeight(), $(".div3").outerHeight());
$(".div1").height(height);
$(".div2").height(height);
$(".div3").height(height);
}).resize();
});
The variable height will be highest height of any of the 3 elements and then you apply it to all 3.
FIDDLE
I added the "resize" function to make it work if user resizes the window as the height may change while doing it.