有没有办法让 HTML 选项卡容器将其高度固定为其最高选项卡的高度？答案

【问题标题】：Is there a way to make an HTML tab container fix its height to that of its tallest tab?有没有办法让 HTML 选项卡容器将其高度固定为其最高选项卡的高度？
【发布时间】：2020-03-22 10:09:45
【问题描述】：

我有一个标签容器，它使用 CSS 隐藏 <div> 容器，并根据当前选择的标签（基于 this CodePen）使用 JavaScript 使其可见：

$(document).ready(function() {
	$('ul.tabs li').click(function() {
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	});
});

body {
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}

.container {
	width: 600px;
	margin: 0 auto;
	border: 1px solid black;
}

ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul.tabs li {
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}

ul.tabs li.current {
	background: #ededed;
	color: #222;
}

.tab-content {
	display: none;
	background: #ededed;
	padding: 15px;
}

.tab-content.current {
	display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
	<ul class="tabs">
		<li class="tab-link current" data-tab="tab-1">Tab One</li>
		<li class="tab-link" data-tab="tab-2">Tab Two</li>
		<li class="tab-link" data-tab="tab-3">Tab Three</li>
	</ul>
	<div id="tab-1" class="tab-content current">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</div>
	<div id="tab-2" class="tab-content">
		 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<div id="tab-3" class="tab-content">
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	</div>
	<div id="tab-4" class="tab-content">
		Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</div>
</div>

我希望选项卡容器的大小（在上面的示例中显示为 1px solid black 行）保持固定，并且足够大以容纳其最高的选项卡，即使未选择最高选项卡也是如此。这可以通过使用实际内容大小而不是某些固定的 CSS 宽度/高度，并且不使用 JavaScript 来计算页面加载后的高度的方式来完成吗？

【问题讨论】：

标签： html css tabs height

【解决方案1】：

给你的“tab-content” div 一个合适的高度，比如 100-200px，并使溢出可以滚动。

.tab-content{
        display: none;
        height:100px;
        background: #ededed;
        padding: 15px;
        overflow:scroll;
    }

【讨论】：

谢谢，但这是我在关于避免的问题中提出的问题。理想情况下，我想要一种不涉及通过 CSS 设置固定、显式高度的解决方案，而是一种计算容器高度以适应最大标签的解决方案。

【解决方案2】：

我发现最简单的方法是使用相对较新的grid layout。只需将每个选项卡内容放入同一个网格单元格中，如下所示：

.content {
  display: grid;
  grid-template-areas: "content";
}

.tab-content {
  grid-area: content;
}

然后设置visibility: hidden 隐藏选项卡，但在布局中为它们保留空间。

给定示例can be found here的修改版本。

【讨论】：