我目前正在创建一个包含4个选项卡的漂亮页面。对于选项卡导航，我使用了https://codepen.io/axelaredz/pen/ipome，它看起来很棒。这里的问题是，我需要为每个选项卡下的每个部分设置不同的高度。有些选项卡会包含更多的内容，有些则更少。据我所见，在css中，整个UL的高度只有370px。如何使此代码自动调整高度，或者至少为每个选项卡内容添加不同的高度？我试着在UL中添加一个相对位置和高度：auto，但它不起作用。
有什么想法可以让它发挥作用吗？
THanks，//C
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS3 Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" />
</head>
<body>
<div class="page">
<h1>Pure CSS Tabs</h1>
<!-- tabs -->
<div class="pcss3t pcss3t-effect-scale pcss3t-theme-1">
<input type="radio" name="pcss3t" checked id="tab1"class="tab-content-first">
<label for="tab1"><i class="icon-bolt"></i>Tesla</label>
<input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
<label for="tab2"><i class="icon-picture"></i>da Vinci</label>
<input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
<label for="tab3"><i class="icon-cogs"></i>Einstein</label>
<input type="radio" name="pcss3t" id="tab5" class="tab-content-last">
<label for="tab5"><i class="icon-globe"></i>Newton</label>
<ul>
<li class="tab-content tab-content-first typography">
<h1>Nikola Tesla</h1>
<p>Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electrical supply system.</p>
<p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p><p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p>
<p class="text-right"><em>Find out more about Nikola Tesla from <a href="http://en.wikipedia.org/wiki/Nikola_Tesla" target="_blank">Wikipedia</a>.</em></p>
</li>
</ul>
</div>
<!--/ tabs -->
</div>
</body>
</html>在您提供的代码笔中，向您的一个li标签添加一个id，如下所示：
<li id="leo" class="tab-content tab-content-2 typography">
<h1>Leonardo da Vinci</h1>
<p>Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanist ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.</p>
<p class="text-right"><em>Find out more about Leonardo da Vinci from <a href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci" target="_blank">Wikipedia</a>.</em></p>
</li>
然后在你的CSS中，参考你创建的id，如下所示，并从那里计算高度。
/**/
/* height */
/**/
.pcss3t > ul,
.pcss3t > ul > li {
height: 390px;
}
//leo is the id that has been added to the second tabs li tag
#leo {
height: 100px;
}
编辑：需要注意的是，我不知道你为什么要编辑ul标签上的高度，因为每个标签都是根据li而不是ul分隔的。无论哪种方式，如果你想使用ul，你都可以通过添加id来以类似的方式完成。