Question

我发现了这个CSS技巧 CSS tabs without using JavaScript。然后我找到了here on Stack关于如何重新设计脚本以创建垂直标签的方式，这是我的＃34; final＆＃34;版本：

<div id="contenitore">
  <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>Content 1</p></div>
    </div>

    <div class="tab">
      <input type="radio" id="tab-2" name="tab-group-1" checked>       
      <label for="tab-2">Tab Two</label>
      <div class="content"><p>Content 2</p></div>
    </div>

  </div>
</div>

这就是CSS：

#contenitore {width:100%;
              height:auto;}
.tabs {width:100%;
       height:auto;
       position: relative;
       clear: both;
       margin: 1% 0;}
.tab {width:100%;
      height: auto;}
.tab label {padding: 1%; 
            margin: 0; 
            position: relative;
            left: 0;        
            width:6.5%;
            height:auto;
            display: block;}
.tab [type=radio] {display: none;}
.content {width:87.5%;
          height:auto;
          position: absolute;
          top:0;
          bottom:0;
          left:8.5%; /*= width tab label (6.5%) + padding (1% = 1%left+!%right)*/
          right: 0;
          padding: 2%;}
[type=radio]:checked ~ label {background: white;
                              z-index: 2;}
[type=radio]:checked ~ label ~ .content {z-index: 1;}

我不明白为什么div .content根本没有响应，即使我设置了高度：auto（100％也没有响应）。是因为特定的html结构以及与输入和标签等其他元素的连接，还是我犯了一些错误？

Answer 1

只需删除

bottom: 0;

来自.content选择器。如果您将其设置为绝对位置，则底部边缘将接触其容器的底部。

如何制作儿童div位置：高度绝对响应

1 个答案: