仅 CSS 多级选项卡显示问题

Question

以下是我在网上搜索后整理的仅 css 选项卡式 html 实现

编辑：我试图避免指定最小高度。标签内容差异很大，我想显示全部内容（不带滚动条）

.tabs {
  position: relative;
  bottom: -1px;
}

.tab {
  float: left;
}

.tab label {
  padding: 10px;
  margin-left: 0px;
  position: relative;
  border: 1px solid #ccc;
  background: white;
  height: 100%;
  line-height: 18px;
  overflow: hidden;
  text-align: center;
  font-size: 14px;
  font-family: Arial;
  z-index: 1;
  cursor: pointer;
}

.tab [type=radio] {
  display: none;
}

.content {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  background: white;
  z-index: 1;
  display: none;
  min-width: 700px;
  padding: 18px 12px;
  border: 1px solid #ccc;
}

[type=radio]:checked~label {
  background-color: #ddd;
  z-index: 2;
}

[type=radio]:checked~label~.content {
  z-index: 2;
  display: block;
}

<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1-report" name="tab-group-report">
    <label for="tab-1-report">Tab 1</label>
    <div class="content">
      <p> Some contents</p>
      <p> Some contents</p>
      <br/>
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-2-report" name="tab-group-report">
    <label for="tab-2-report">Tab 2</label>
    <div class="content">
      <div class="tabs">
        <div class="tab">
          <input type="radio" id="tab-1-strategy_1" name="tab-group-strategy_1">
          <label for="tab-1-strategy_1">Tab 2-1</label>
          <div class="content">
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-2-strategy_1" name="tab-group-strategy_1">
          <label for="tab-2-strategy_1">Tab 2-2</label>
          <div class="content">
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-3-report" name="tab-group-report">
    <label for="tab-3-report">Tab 3</label>
    <div class="content">
      <div class="tabs">
        <div class="tab">
          <input type="radio" id="tab-1-strategy_2" name="tab-group-strategy_2">
          <label for="tab-1-strategy_2">Tab 3-1</label>
          <div class="content">
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<br/><br/>
<div>
  <p>Footer</p>
</div>

它工作得很好，但我似乎无法让“父”标签高度跟随“子”标签高度。这就是为什么我们可以在单击选项卡后看到混乱的边框和丢失的“页脚”。

关于如何解决这个问题的任何想法？谢谢。

Answer 1

你能检查一下下面的代码吗？希望它对你有用。

1. 您需要为 .tabs 提供特定的最小高度并提供 clear:both; 属性，因为已经将 float:left 提供给 .tab（子元素）
2. 将overflow:auto 分配给.content div。

请参考此链接：https://jsfiddle.net/yudizsolutions/Lhwm1jbn/1/

.tabs {
  position: relative;
  min-height: 300px;
  /* This part sucks */
  clear: both;
  margin: 25px 0;
}

.tab {
  float: left;
}

.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
  line-height: 18px;
  font-size: 14px;
  font-family: Arial;
  cursor: pointer;
}

.tab [type="radio"] {
  display: none;
}

.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
  overflow: auto;
}

.content>* {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.6s ease;
}

[type="radio"]:focus~label {
  ouline: 2px solid blue;
}

[type="radio"]:checked~label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}

[type="radio"]:checked~label~.content {
  z-index: 1;
}

[type="radio"]:checked~label~.content>* {
  opacity: 1;
  transform: translateX(0);
}

<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">Tab One</label>
    <div class="content">
      <p> Some contents</p>
      <p> Some contents</p>
      <br/>
    </div>
  </div>
  <div class="tab second-tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">Tab Two</label>
    <div class="content">
      <div class="tabs">
        <div class="tab">
          <input type="radio" id="tab-4" name="tab-group-2" checked>
          <label for="tab-4">Tab One</label>
          <div class="content">
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-5" name="tab-group-2">
          <label for="tab-5">Tab Two</label>
          <div class="content">
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>
            <p> Some contents</p>

          </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-6" name="tab-group-2">
          <label for="tab-6">Tab Three</label>
          <div class="content">
            You made it this far?!
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-3" name="tab-group-1">
    <label for="tab-3">Tab Three</label>
    <div class="content">
      <p> Some contents</p>
      <p> Some contents</p>
      <p> Some contents</p>
      <p> Some contents</p>

    </div>
  </div>
</div>
<div>
  <p>Footer</p>
</div>