标签的高度不会随其内容而扩展

Question

我有包含文字的标签。当我尝试使用height:auto或height:100%设置高度时，仅在使用px时才有效。但是，这会阻止标签在文本较长时展开。

这是我的css：

.tab-section {
    float: left;
    width: 100%;
    height: 792px;
    margin-bottom: 25px;
} 

如何制作高度auto？

Answer 1

这是因为您在 li 元素中显示标签内容。 由于 li 这是一个菜单，它看起来像一个破碎的布局。

您应该在标签部分之外显示标签内容。 还要注意浮动（例如，如果父有浮动：左，孩子也应该有浮动：左边以满足父高度）

Answer 2

带有.tab-content

的

position:absolute

Based on feeela answer

绝对定位元素从流中移除，因此被其他元素忽略。因此，您无法根据绝对定位的元素设置父级高度。

您可以使用此脚本来处理它：

$("[type = radio]").click(function () {
    var oh=$(this).parent().find(".content").outerHeight();    
    $(".tabs").height(oh);
});

Fiddle demo

你也可以在ul.tabs上使用视口单元（vh）或calc（）（css3）