Question

我正在尝试在纯CSS中显示标签内容，但我无法为父级修复此高度。如果内容在标签内容更多，则父内容（红色区域）不会扩展。当内容较多时，请帮助扩展父级（红色区域），点击其他选项卡后，之前的选项卡内容不会隐藏。请在两种情况下提供帮助。

＆＃13;

.tabs-container {
  background: red;
  padding: 30px;
  height: 100%;
}

.tabs {
  position: relative;
  clear: both;
  margin: 25px 0;
}

.tab {
  display: block;
  width: 220px;
}

.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  border-right: none;
  margin-left: -1px;
  position: relative;
  left: 1px;
  width: 200px;
  display: inline-block
}

.tab [type=radio] {
  display: none;
}

.content {
  position: absolute;
  top: 0px;
  left: 220px;
  background: white;
  right: 0;
  padding: 20px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.content > * {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
}

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid #ccc;
  z-index: 2;
}

[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

[type=radio]:checked ~ label ~ .content > * {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
}

＆＃13;

<div class="tabs-container">
  <div class="tabs">
    <!--tabs-->
    <div class="tab">
      <input type="radio" id="tab-1" name="tab-group-1" checked="">
      <label for="tab-1">Tab One</label>
      <!--tabs-content-->
      <div class="content">
        <p>Our expert team allows us to offer Protective Coating services, which is famous for its variety of benefits such as offering universal strainers for light shades, offers breath ability for preventing moisture, curing a tough flexible & abrasion
          resistant coating, resistant to chalking and flaking and offering strong bonding on cement concrete, asbestos & mild steel. Our range of services finds its application in various areas like chajjas, external vertical walls, china mosaic tiles,
          water tanks (externally), sloppy roofs, asbestos roof, roof terraces and stone walls. These services consist of acrylic elastomeric dust proof coating and polyurethane waterproof coatings. Protective Coating Our expert team allows us to offer
          Protective Coating services, which is famous for its variety of benefits such as offering universal strainers for light shades, offers breath ability for preventing moisture, curing a tough flexible & abrasion resistant coating, resistant to
          chalking and flaking and offering strong bonding on cement concrete, asbestos & mild steel. Our range of services finds its application in various areas like chajjas, external vertical walls, china mosaic tiles, water tanks (externally), sloppy
          roofs, asbestos roof, roof terraces and stone walls. These services consist of acrylic elastomeric dust proof coating and polyurethane waterproof coatings.</p>
      </div>
      <!--tabs-content end-->
    </div>

    <!--tabs-->
    <div class="tab">
      <input type="radio" id="tab-2" name="tab-group-1" checked="">
      <label for="tab-2">Tab One</label>
      <!--tabs-content-->
      <div class="content">
        <p>Stuff for Tab One</p>
      </div>
      <!--tabs-content end-->
    </div>

    <!--tabs-->
    <div class="tab">
      <input type="radio" id="tab-3" name="tab-group-1" checked="">
      <label for="tab-3">Tab One</label>
      <!--tabs-content-->
      <div class="content">
        <p>Protective Coating
        </p>
      </div>
      <!--tabs-content end-->
    </div>
  </div>
</div>

＆＃13;

工作代码 link

Answer 1

你的问题（希望它在html和body中）然后

.tabs-container {background: red;padding: 30px;height: 100%;overflow:auto;}

会为你效劳。

jsbin link

Answer 2

如果我理解也许

html,
body {
    height: 100%;
}

父内容高度未随标签内容高度扩展

2 个答案: