Html 如何使包含UL的DIV的高度自动展开

我正在使用下面的HTML来显示一个选项卡式列表，我将其简化为集中在最长的列表上，因为这是导致我的问题的原因。如何使包含ul的div根据ul的长度自动扩展到其高度。CSS位于HTML的下方：

这是小提琴：

---

对不起，我已经更新了示例，没有意识到其他人将不再看到原始代码-我第一次使用JSFIDLE

我不得不做各种改变：

删除内容的硬编码高度。让浏览器计算它 删除.content div的绝对位置不清楚为什么需要它 最重要的是，为.content添加了一条规则：之后通常通过在CSS中定义clearfix类并在适当的元素上使用它来使用

.内容：之后{ 内容：； 显示：块； 字号：0； 身高：0； 明确：两者皆有； 可见性：隐藏； }

---

现在背景延伸到列表的底部

我将更改css中的3个内容：

第一移除位置：绝对位置；from.content div{} 移除高度：370px；from.content{} 替换“float:left”以显示.菜单项li{}的内联块 -

这些元素的更新css为：

.content {
    position: relative;
    width: 100%;
    z-index: 5;
    border-radius: 0 3px 3px 3px;
}

.content div {
    padding: 10px 40px;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}
.menu_items li{
    display:inline-block;
    width:340px;
}

---

把它放在a中，我会帮助你。谢谢，现在就这样做。已经为你做了。这是上面的代码，我已经尝试将你的编辑应用到我的代码中，当它应用到完整的ul时，它有一些有线效果，我会从“.container”中删除宽度。它应该自动计算。我不知道你在这里说什么奇怪。对于“.content div”，您已将不透明度设置为0。这会使项目不可见，虽然“可见性：隐藏”会更好，但仍为其保留空间。大概你应该改为设置“display:none”。添加“.tabs标签{border:1px solid transparent}”看起来也会更好，以避免在其他菜单高亮显示时“甜点”菜单来回移动。使用“怪异”是我的错误措辞我道歉，在应用最初的更改时出现以下问题。随意吃的盒子不会收缩，所以在李物品下面有很大的空间。在用餐时，在li项目的上方和下方有很大的空间，这也发生在下午茶上。在甜点上，每一个李项目都被推到了页面的底部，同样，所有这一切都发生在你尝试看到的ulDid显示没有任何大小调整的情况下：没有如我之前所建议的那样？如果社区提供任何进一步的帮助，我们将不胜感激。@JasonBrown你还需要什么帮助？我已经应用了@manuBriot和你自己建议的更改，它们很有效，但是，如果我实现manuBriot的最后一个建议，即在.content div中将不透明度：0更改为display:none，这将隐藏ul的所有内容。因此，就目前情况而言，我必须保留。content div为不透明：0，这意味着li是隐藏的，但仍保留空间，而不是框大小调整。我的回答仅涉及您的原始问题。。你能把你最新的小提琴链接起来吗，这样我就可以看到你正在谈论的问题了？这正是我想要的，你改变了什么？

.menu_wrapper {
    background: url(../img/bg/light_cream_bg.jpg);
}
.tabs {
    background: url("http://fmkcatering.com/wp-content/themes/fmk/images/grey-bg.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    position: relative;
    margin: 40px auto;
    width: 750px;
}
.tabs input {
    position: absolute;
    z-index: auto;
    width: 100%;
    height: 40px;
    left: 0px;
    top: 38px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
}
.tabs label {
    font-size: 15px;
    line-height: 40px;
    height: 40px;
    position: relative;
    padding: 0 20px;
    float: left;
    display: block;
    width: 187px;
    color: #385c5b;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
}
.tabs label:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}
.tabs input:hover + label {
    color: #FFF;
    border: 1px solid #F90;
    background-color: #CCC;
}
.tabs label:first-of-type {
    z-index: 4;
}
.tab-label-2 {
    z-index: 3;
}
.tab-label-3 {
    z-index: 2;
}
.tab-label-4 {
    z-index: 1;
}
.tabs input:checked + label {
    z-index: 6;
}
.clear-shadow {
    clear: both;
}
.content {
    position: relative;
    width: 100%;
    height: 370px;
    z-index: 5;
    border-radius: 0 3px 3px 3px;
}
.content div {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 40px;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}
.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;
}
.content div h2, .content div h3 {
    color: #398080;
}
.content div p {
    font-size: 14px;
    line-height: 22px;
    font-style: italic;
    text-align: left;
    margin: 0;
    color: #777;
    font-family: Cambria, Georgia, serif;
    text-align: center;
}
.menu_items {
    list-style: none outside none !important;
    width: 700px;
    margin: 0;
    padding: 0;
    text-align: left;
}
.menu_items li {
    float: left;
    width: 340px;
}
.menu_items li h3 {
    font-size: 15px;
    font-size: 15px;
    margin-bottom: 5px;
    text-align: center;
}

.content {
    position: relative;
    width: 100%;
    z-index: 5;
    border-radius: 0 3px 3px 3px;
}

.content div {
    padding: 10px 40px;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}
.menu_items li{
    display:inline-block;
    width:340px;
}