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＆amp; TAB3 有display: none;
tab1具有可变内容，因此设置固定的height或min-height
在display: flex;上设置article会干扰nav
设置display: flex;也会干扰display: none;
nav无法移至境外article
tab2＆amp; tab3显示较短的高度，导致整个盒子的难看的大小调整

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

Answer 1

要拥有没有脚本的动态相等高度元素，您可以使用CSS Flexbox。

在这里，我添加了几个input和label来做实际的标签，还有一个div作为{section的包装。 {1}}＆＃39; S

通过在overflow: hidden上设置article，为div提供section的大小倍数，可以简单地来回滑动，横向，以达到你的要求。

Fiddle demo

此处作为带有扭曲的Stack片段完成，幻灯片动画，并评论为4个部分

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以通过这样的一些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

我添加了＆＃34;调整大小＆＃34;如果用户调整窗口大小，则可以使其工作，因为高度可能会在执行时发生变化。

CSS标签部分的相同高度

2 个答案: