html - Div高度自动调整至内容

这些选项卡有一个问题，这些选项卡无法根据内容的高度进行调整。我尝试了一切，但没有成功。众所周知，我将.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;
}

谢谢！

最佳答案

要根据内容的高度调整高度，应使用height:auto;而不是height:2550px;