请注意以下用于选项卡式显示的 HTML(用于选项页面):
我想为 tab2 和 tab3 保持与 tab1 相同的高度
<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 始终首先加载
display: block;
tab2 和 tab3 有display: none;
- tab1 的内容可变,所以设置固定的
height
或min-height
不切实际 - 在
article
上设置display:flex;
会干扰nav
- 设置
display: flex;
也会干扰display: none;
nav
不能移到article
之外- tab2 和 tab3 都以较短的高度显示,这导致整个框的大小调整不美观
注意 HTML 用于 Firefox/Chrome 扩展的选项页面,而不是网页。由于 Chrome 使用面板而 Firefox 使用选项页面,基于像素的解决方案可能无法按预期工作。可能还有 Firefox/Chrome 特定的解决方案。
最佳答案
要在没有脚本的情况下拥有动态等高元素,您可以使用 CSS Flexbox。
我在这里添加了几个 input
和 label
来进行实际的制表,还有一个额外的 div
作为包装器对于部分
。
通过在 article
上设置 overflow: hidden
,将 div
的大小乘以 section
的数量' s,可以简单地来回滑动,侧向滑动,以达到您的要求。
这里作为 Stack 片段完成,带有扭曲,动画幻灯片,如评论,有 4 个部分
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>
关于html - 选项卡部分的 CSS 相同高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44199927/