强迫孩子们占据相同的空间但从 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 {

  --num-of-tabs: 3;

}

.container {

  width: 400px;

  overflow: hidden;

  border: 1px solid gray;

}

.inner {

  width: calc(var(--num-of-tabs) * 100%); 

  display: flex;

  transform: translateX(-33.33%); /* staring on tab #2 */

}

.box {

  width: calc(100% / var(--num-of-tabs));

}

<div class="container">

  <div class="inner">

    <div class="box">

      blah blah blah

    </div>

    <div class="box">

      blah blah blah blah

    </div>

    <div class="box">

      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>

</div>