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

标签 html css google-chrome-extension flexbox firefox-addon-webextensions

请注意以下用于选项卡式显示的 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 的内容可变,所以设置固定的heightmin-height 不切实际
  • article 上设置 display:flex; 会干扰 nav
  • 设置 display: flex; 也会干扰 display: none;
  • nav 不能移到article 之外
  • tab2 和 tab3 都以较短的高度显示,这导致整个框的大小调整不美观

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

最佳答案

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

我在这里添加了几个 inputlabel 来进行实际的制表,还有一个额外的 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>

关于html - 选项卡部分的 CSS 相同高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44199927/

相关文章:

javascript - 需要帮助根据屏幕宽度删除或​​隐藏 div

jquery - 重定向时能够看到在所有页面上打开的对话框

html - 覆盖 1 个 div 但不会扭曲网站或不安排网站

javascript - 注入(inject)时 Jquery 对话框无法正确显示

javascript - 无法在 Chrome 扩展程序中提交表单

javascript - 具有三色行的 Jquery 数据表

html - 在外部滚动 div 之外显示内部绝对定位的 div

html - 根据窗口大小绘制游戏板/ table 大小

php - 清理属性名称

javascript - Ajax 调用无法使用 list v2 的 chrome 扩展