强迫孩子们占据相同的空间但从 0, 0 开始？

Question

考虑一个带有选项卡和选项卡内容的模式。第一个选项卡的内容高度为 100 像素，第二个选项卡的内容高度为 500 像素，第三个选项卡的内容高度为 50 像素。目标是让模态框主体始终为最高选项卡的高度 (500px)，因此当您在选项卡之间切换时，模态框的大小保持不变。

这不能通过以下方式实现：

• 将选项卡内容区域包装器设置为position: relative并将每个选项卡设置为position: absolute; top: 0; left: 0;因为绝对定位的元素不占用空间。

• 默认情况下，将所有选项卡设置为不可见，但活动选项卡除外。这会导致选项卡垂直堆叠，因此选项卡 2 上方将有 100 像素的空间，选项卡 3 上方将有 600 像素的空间（模态框主体的总高度将是所有选项卡的高度之和）。

请参阅下面链接的示例。在“最终目标”和“实际”之间切换以查看视觉差异以及我想要实现的目标。

我真的不想使用 JS 来检查每个选项卡的高度（需要每隔一段时间进行一次，因为选项卡可以根据当前选择等更改高度）。所以这将是一个非常hacky的解决方案。不确定是否有更好的方法。

现在，我将为选项卡容器选择一个“合适”的高度，并允许更高的选项卡在需要时滚动。

示例：https: //codepen.io/joshm123/pen/NWrEVjJ（复制如下）

超文本标记语言

<div class="modal">

  <div class="header">

    <h2>Welcome!</h2>

  </div>

  <div class="body">

    <div class="tabs">

      <button class="tab" onClick="selectTab(1)">Tab 1</button>

      <button class="tab" onClick="selectTab(2)">Tab 2</button>

      <button class="tab" onClick="selectTab(3)">Tab 3</button>

    </div>

    

    <div class="tabs-wrapper">

      <div id="tab1" class="tab-content active">

        blah blah blah<br/>

        blah blah blah

      </div>

      <div id="tab2" class="tab-content">

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah<br/>

        blah blah blah

      </div>

      <div id="tab3" class="tab-content">

        blah blah blah

      </div>

    </div>

  </div>

  <div class="footer">

    <button id="showEndGoalButton" onClick="toggleView()">Show End Goal</button>

    <button id="showActualButton" onClick="toggleView()">Show Actual</button>

  </div>

</div>

CSS

.modal {

  position: absolute;

  width: 500px;

  left: calc(50% - 250px);

  top: 30px;

  border: 1px solid #999;

}

.header {

  padding: 10px;

  border-bottom: 1px solid #999;

}

.header h2 {

  margin: 0;

  padding: 0;

}

.body {

  padding: 10px;

}

.tabs > .tab {

  margin-right; 10px;

}

.tabs-wrapper {

  margin: 10px 0;

  border: 1px dotted red;

}

Answer 1

对于简单的选项卡面板，您可以创建一个容器并overflow: hidden添加一个比该容器更宽的内部容器。在您的情况下，您有 3 个选项卡，因此内部容器应该很300%宽。这将允许容器尊重最高的内部 div，因为它本质上是裁剪内部容器。然后使用 javascript 调整transformon.inner来控制显示哪个选项卡。我没有编写 JavaScript，但是当单击“选项卡 1”时，将innerdiv 设置为transform: translateX(0). 当单击“tab 3”时，transform: translateX(-66.666%)...希望您能获得 ide。:root {&nbsp; --num-of-tabs: 3;}.container {&nbsp; width: 400px;&nbsp; overflow: hidden;&nbsp; border: 1px solid gray;}.inner {&nbsp; width: calc(var(--num-of-tabs) * 100%);&nbsp;&nbsp; display: flex;&nbsp; transform: translateX(-33.33%); /* staring on tab #2 */}.box {&nbsp; width: calc(100% / var(--num-of-tabs));}<div class="container">&nbsp; <div class="inner">&nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; blah blah blah&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; blah blah blah blah&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah<br/>&nbsp; &nbsp; &nbsp; &nbsp; blah blah blah&nbsp; &nbsp; </div>&nbsp; </div></div>