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 都以较短的高度显示，这导致整个框的大小调整不美观

N.B. HTML 用于 Firefox/Chrome 扩展的选项页面，而不是网页.由于 Chrome 使用面板，而 Firefox 使用选项页面，基于像素的解决方案可能无法按预期工作。可能还有 Firefox/Chrome 个特定的解决方案。

Answer 1

你可以像这样用一些 jquery 轻松地做到这一点：

$(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();
});

变量 height 将是 3 个元素中任何一个的最高高度，然后将其应用于所有 3 个元素。

FIDDLE

我添加了 "resize" 函数以使其在用户调整 window 的大小时起作用，因为这样做时高度可能会发生变化。

Answer 2

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

在这里，我添加了几个 input 和 label 来进行实际的制表，以及一个额外的 div 作为 section 的包装的。

通过在 article 上设置 overflow: hidden，将 div 的大小乘以 section 的数量，可以简单地前后左右滑动, 达到你的要求。

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>

CSS 选项卡部分的高度相同

CSS Same Height for Tabbed Sections

html

css

google-chrome-extension

flexbox

firefox-addon-webextensions