Question

我对这些标签的问题没有根据内容的高度进行调整。我尝试了我所知道的一切，但没有奏效。要知道我把.acontent 2550px的高度（显示.acontent-1的内容需要）。但我希望当你切换到另一个标签时，div .acontent要小一些，相对于.acontent-2的内容

我在这里做了一个jsfiddle：http://jsfiddle.net/4XGvT/

我知道有很多代码，但主要结构是这一个：

<section class="tabs">here are the buttons

 <div class="acontent">
  <div class="acontent-1">div that has to auto-adjust
  <div class="acontent-2">div that has to auto-adjust
  <div class="acontent-3">div that has to auto-adjust

和css：

.acontent {
    background: #fff;
    position: relative;
    width: 100%;
    height: 2550px;
    z-index: 5;
    overflow: hidden;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
    text-align: justify;
}
.acontent>div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 100%;
    padding: 10px 40px;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    transition: all linear 0.1s;
}

谢谢！

Answer 1

要根据内容的高度调整高度，您应该使用height:auto;代替height:2550px;

Answer 2

尝试将其放在标签的css中：

height:auto;

Answer 3

通过为已检查的div添加不同的高度来解决它：

.tabs input.tab-selector-2:checked ~ .acontent{
height:1100px !important;
}
.tabs input.tab-selector-3:checked ~ .acontent{
height:1250px !important;
}
.tabs input.tab-selector-4:checked ~ .acontent{
height:450px !important;
}
.tabs input.tab-selector-5:checked ~ .acontent{
height:950px !important;
}
.tabs input.tab-selector-6:checked ~ .acontent{
height:700px !important;
}
.tabs input.tab-selector-7:checked ~ .acontent{
height:500px !important;
}
.tabs input.tab-selector-8:checked ~ .acontent{
height:800px !important;
}

Div高度自动调整到内容

3 个答案: