html - 尽管有其他 div 切换条件，但仍修复 div 的位置

Question

我的 html 中有总数3 Divs。Div#1并且Div#2是互斥的。Div#1的高度大于Div#2。在Div#3中，我有 2 个按钮，我可以使用它们来决定Div显示哪个Div#1或Div#2. 单击按钮时，我正在处理DivsJavaScript 中的外观逻辑。由于 Div#1 和 Div#2 的高度不同，单击按钮时Button#1，Button#2在 myDiv#3中，将根据orDiv#3的高度从其原始位置上下移动。我所期望的是，无论屏幕上的可见性如何，都应该始终保持原样，而不是根据和的高度上下移动Div#1Div#2Div#1Div#2Div#3Div#1Div#2. 请查找 plunker CSS Issue以供参考。在这里，当我单击时Button#1，Div#3向上移动，当我单击时Button#2，Div#3向下移动，这不应该发生，Div#3应该始终保持在其原始位置。

下面是我的 html、CSS 和 JavaScript：

<div id="div1" class="items-list">
   <ul>
      <li>Chair 1 </li>
      <li>Chair 2 </li>
      <li>Chair 3 </li>
      <li>Chair 4 </li>
      <li>Chair 5 </li>
      <li>Chair 6 </li>
      <li>Chair 7 </li>
      <li>Chair 8 </li>
      <li>Chair 9 </li>
      <li>Chair 10</li>
      <li>Chair 11 </li>
      <li>Chair 12 </li>
   </ul>
</div>
<div id="div2" class="loader hide">
   <p> loading ... 
   <p>
</div>
<div id="div3" class="action-items">
   <div class="items-change" onclick="changeList()">
      <button> Button1</button>
   </div>
   <div class="original">
      <button onclick="displayOriginalList()"> Button2</button>
   </div>
</div>

CSS：

.items-list {
  height: 250px;
}
.loader {
  height: 50px;
}

.action-items {
  display: flex;
  justify-content: space-between;
}

.hide {
  display: none;
}

JavaScript：

function changeList() {
  const $itemsList = document.querySelector('#div1');
  const $loader = document.querySelector('#div2');
  $itemsList.classList.add('hide');
  $loader.classList.remove('hide');
}

function displayOriginalList () {
  const $itemsList = document.querySelector('#div1');
  const $loader = document.querySelector('#div2');
  $itemsList.classList.remove('hide');
  $loader.classList.add('hide');
}

标签： htmlcssflexboxcss-position