Html Div高度根据内容自动调整

我对这些选项卡有一个问题，它们不能根据内容的高度进行调整。我尝试了我知道的一切，但没有成功。如需了解，我将.acontent 2550px的高度设置为（显示.acontent-1的内容所需的高度）。但是我希望当您切换到另一个选项卡时，div.acontent相对于.acontent-2的内容更小

我在这里做了一个jsfiddle：

我知道有很多代码，但主要结构如下：

<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

---

谢谢

要根据内容的高度调整高度，应使用

height:auto而不是
高度：2550px
尝试将其放入选项卡的css中：

height:auto;

通过为选中的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;
}

您还应该删除位置：绝对；
.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;
}