Question

我正在构建一个手风琴式菜单系统，除了上面的选项卡打开时需要将任何菜单下推到容器的底部之外，我已基本完成了该操作。

如果打开了tab2，那么我希望tab1和tab2停留在顶部，并且我希望tab3，tab4和tab5向下推到容器的底部。只能使用CSS做到这一点吗？

jsfiddle-我希望最终结果如下图所示。

css

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html,
body {
 height: 100%;
 font: 16px/1 'Open Sans', sans-serif;
 color: #555;
 background: #212121;
}

.togglebox {
 width: 240px;
 height: 100%;
 background: #252525;
}

input[type="radio"] {
 position: absolute;
 opacity: 0;
}

label {
 position: relative;
 display: block;
 height: 30px;
 line-height: 30px;
 padding: 0 20px;
 font-size: 14px;
 font-weight: bold;
 color: rgba(255, 255, 255, 0.5);
 background: #434343;
 cursor: pointer;
}

label:hover {
 background: #1f2d3a;
}

.content {
 height: 0;
 overflow: hidden;
}

input[type="radio"]:checked ~ .content {
 height: auto;
}

p {
 margin: 15px 0;
 padding: 0 20px;
 font-size: 11px;
 line-height: 1.5;
 color: rgba(255, 255, 255, 0.8);
}

.togglebox div {
    margin-bottom: 1px;
}
.togglebox div.active label {
    /* Active label that was selected */
    background: red;
}

html

<div class="togglebox">
            <div class="tab">
              <input id="radio1" type="radio" name="toggle"/>
              <label for="radio1">Tab1</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab active">
              <input id="radio2" type="radio" name="toggle" checked="checked"/>
              <label for="radio2">Tab2</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio3" type="radio" name="toggle"/>
              <label for="radio3">Tab3</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio4" type="radio" name="toggle"/>
              <label for="radio4">Tab4</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
            <div class="tab">
              <input id="radio5" type="radio" name="toggle"/>
              <label for="radio5">Tab5</label>
              <div class="content">
                <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
                <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
              </div>
            </div>
          </div>

Answer 1

您应将活动项目的高度设置为屏幕的整个高度（100vh）减去5个标签的高度（150px）。我已经155px来解决标签之间边界/空格的额外5px。

input[type="radio"]:checked ~ .content {
 height: calc(100vh - 155px);
}

作为一个有趣的提示，由于您没有为height: auto;使用content，因此可以为height设置动画。将transition: height 0.2s;放在.content { ... }样式上将为您提供滑块打开/关闭的简洁动画。请在下面的示例中随意删除它。

工作示例：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font: 16px/1 'Open Sans', sans-serif;
  color: #555;
  background: #212121;
}

.togglebox {
  width: 240px;
  height: 100%;
  background: #252525;
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  background: #434343;
  cursor: pointer;
}

label:hover {
  background: #1f2d3a;
}

.content {
  height: 0;
  overflow: hidden;
  transition: height 0.2s;
}

input[type="radio"]:checked ~ .content {
 height: calc(100vh - 155px);
}

p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.togglebox div {
  margin-bottom: 1px;
}

.togglebox div.active label {
  /* Active label that was selected */
  background: red;
}

<div class="togglebox">
  <div class="tab">
    <input id="radio1" type="radio" name="toggle" />
    <label for="radio1">Tab1</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab active">
    <input id="radio2" type="radio" name="toggle" checked="checked" />
    <label for="radio2">Tab2</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab">
    <input id="radio3" type="radio" name="toggle" />
    <label for="radio3">Tab3</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab">
    <input id="radio4" type="radio" name="toggle" />
    <label for="radio4">Tab4</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div class="tab">
    <input id="radio5" type="radio" name="toggle" />
    <label for="radio5">Tab5</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
</div>

在标签上方打开时将div元素推到容器底部

1 个答案: