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

Question

我有一个标签容器隐藏了<div>带有 CSS 的容器，并根据当前选择的选项卡(基于 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 来计算页面加载后的高度？

Answer 1

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

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

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

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

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