从 TAB 增加 <ul> 的高度答案

【问题标题】：Increase the height of an <ul> from a TAB从 TAB 增加 <ul> 的高度
【发布时间】：2020-09-28 15:26:55
【问题描述】：

我目前正在创建一个包含 4 个选项卡的漂亮页面。对于标签导航，我使用了 https://codepen.io/axelaredz/pen/ipome ，看起来很棒。这里的问题是我需要为每个选项卡下的每个部分设置不同的高度。有些选项卡将包含更多内容，有些则更少。据我所见，在 css 中，整个 UL 的高度只有一个 370px。如何使此代码自动调整高度，或者至少为每个选项卡内容添加不同的高度？我尝试在 UL 中添加 position relative 和 height: auto 但它不起作用。

有什么想法可以让它发挥作用吗？

谢谢， //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>

【问题讨论】：

标签： html css tabs navigation height

【解决方案1】：

在您提供的 codepen 中，将 id 添加到您的 li 标签之一，如下所示：

<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 以类似的方式进行。

【讨论】：

那行不通，因为我限制在 UL 的最大 390 像素。如果我将例如 7000px 高度添加到该 ID，则不会发生任何事情。如果我添加 100px，我最终会得到一个垂直滚动。我正在尝试为每个选项卡扩展