Question

实际上我有一个垂直标签菜单，我想要实现的是根据内容或标签高度（更大的胜利）动态设置菜单包装高度

这是我到目前为止所做的一个方面：http://jsfiddle.net/f9zt9xqr/2/

HTML：

<div id="page-wrap">
      <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>Stuff for Tab One</p>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-2" name="tab-group-1">
          <label for="tab-2">Tab Two</label>
          <div class="content">
            <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
            <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
          </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>Stuff for Tab Three</p>
          </div>
        </div>
      </div>
    </div>

CSS：

* {
    gmargin: 0;
    spadding: 0;
}
body {
    background: #f9f9fc;
}
#tab-1{
  position: absolute;
  top: -200px;
  left: -200px;
}
#tab-3{
  position: absolute;
  top: -200px;
  left: -200px;
}
#tab-2{
  position: absolute;
  top: -200px;
  left: -200px;
}

#page-wrap{
  position: relative;
  background:#123456;
}
.tabs {
    position: relative;
    hmin-height: 200px;
    /* This part sucks */
    clear: both;
    smargin: 25px 0;
}
.tab {
    rfloat: left;
    sposition:absolute; 
   height: auto;
}
.tab label {
    background: #f5f5f9;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    dposition: relative;
    left: 1px;
    width: 70px;
    display: block;
}
.tab[type=radio] {
    display: none;
}

.content {
    display:none;
    position: absolute;
    top: 0px;
    left: 92px;
    background: white;
    right: 0;
    zbottom: 0;
    padding: 20px;
    border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
    background: white;
    sborder-bottom: 1px solid white;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    8overflow:auto;
    display:inline;
    z-index: 1;
}

在第二个选项上，您可以清楚地注意到页面换行不会扩展到内容大小

我认为这是因为内容是标签的内部元素，因此应该在那里进行修改，但它也不起作用。

有任何建议如何实现，也许不介意解释我做错了什么？

Answer 1

.tabs { display:table; }
label {display:table-cell;}
.content {display-table:cell;}

删除绝对位置，因为在这种情况下它无法帮助您。看看它如何发展

PS：从display:inline

中删除[type="radio"]:checked ~ label ~ .content

Answer 2

我更新了css以取出一些绝对定位，并使内容的最小高度为100％，这也需要取出内容区域的垂直填充。

http://jsfiddle.net/f9zt9xqr/4/

.content {
    display:none;
    position: absolute;
    top: 0;
    left: 92px;
    background: white;
    right: 0;
    padding: 0 20px;
    border: 1px solid #ccc;
    min-height: 100%;
}

垂直标签与内容高度相同

2 个答案: