html - 选项卡部分的 CSS 相同高度

Question

请注意以下用于选项卡式显示的 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 特定的解决方案。

Answer 1

要在没有脚本的情况下拥有动态等高元素，您可以使用 CSS Flexbox。

我在这里添加了几个 input 和 label 来进行实际的制表，还有一个额外的 div 作为包装器对于部分。

通过在 article 上设置 overflow: hidden，将 div 的大小乘以 section 的数量' s，可以简单地来回滑动，侧向滑动，以达到您的要求。

Fiddle demo

这里作为 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>