javascript - 如何使两个 div 屏幕显示和隐藏在相同的高度

Question

我想显示两个屏幕。我希望它们的高度完全相同，但第一个屏幕的高度必须与第二个屏幕的高度相同，并且第二个屏幕的大小是动态调整的。

有没有一种方法可以正确地执行此操作，以便我可以在它们之间切换并使用 CSS 使它们具有相同的高度，还是我必须使用 JavaScript？

我可以使用下面的示例 JavaScript，但按钮上方有一些奇怪的空间。

var basicView = document.getElementById("basic");
var advancedView = document.getElementById("advanced");

var basicButton = document.getElementById("basicButton");
var advancedButton = document.getElementById("advancedButton");

basicView.style.height = getComputedStyle(advancedView).height;
advancedView.style.display = "none";

basicButton.addEventListener("click", function() {
  advancedView.style.display = "none";
  basicView.style.display = "block";
})

advancedButton.addEventListener("click", function() {
  advancedView.style.display = "block";
  basicView.style.display = "none";
})

#basic {
  background-color: rgb(255,0,0,.2);
}

#advanced {
  background-color: rgb(155,145,0,.2);
}

.buttonbar {
  flex-direction:row;
}

.button {
  display: inline-block;
  background-color: gainsboro;
  padding: 4px 8px;
  cursor: pointer;
}
.button:hover {
  background-color: silver;
}

<div id="container">
  <div id="basic">
    <p>Hello world basic</p>
  </div>
  <div id="advanced">
    <p>Hello world adv</p>
    <p>Hello world adv</p>
    <p>Hello world adv</p>
    <p>Hello world adv</p>
  </div>
</div>

<div class="buttonbar">
  <div id="basicButton" class="button">
    Basic
  </div>
  <div id="advancedButton" class="button">
    Advanced
  </div>
</div>

Answer 1

这是 CSS 网格的一个想法，您可以将两个元素放在同一轨道内，使它们具有相同的大小，然后调整 visibility

var basicView = document.getElementById("basic");
var advancedView = document.getElementById("advanced");

var basicButton = document.getElementById("basicButton");
var advancedButton = document.getElementById("advancedButton");

advancedView.style.visibility = "hidden";

basicButton.addEventListener("click", function() {
  advancedView.style.visibility = "hidden";
  basicView.style.visibility = "visible";
})

advancedButton.addEventListener("click", function() {
  advancedView.style.visibility = "visible";
  basicView.style.visibility = "hidden";
})

#basic {
  background-color: rgb(255,0,0,.2);
}

#advanced {
  background-color: rgb(155,145,0,.2);
}

.buttonbar {
  flex-direction:row;
}

.button {
  display: inline-block;
  background-color: gainsboro;
  padding: 4px 8px;
  cursor: pointer;
}
.button:hover {
  background-color: silver;
}
#container {
  display:grid;
}
#container  > *{
  grid-row:1;
  grid-column:1;
}

<div id="container">
  <div id="basic">
    <p>Hello world basic</p>
  </div>
  <div id="advanced">
    <p>Hello world adv</p>
    <p>Hello world adv</p>
    <p>Hello world adv</p>
    <p>Hello world adv</p>
  </div>
</div>

<div class="buttonbar">
  <div id="basicButton" class="button">
    Basic
  </div>
  <div id="advancedButton" class="button">
    Advanced
  </div>
</div>

另一个使用 flexbox 的想法，您考虑负边距以允许重叠并依赖拉伸(stretch)行为具有相同的高度:

var basicView = document.getElementById("basic");
var advancedView = document.getElementById("advanced");

var basicButton = document.getElementById("basicButton");
var advancedButton = document.getElementById("advancedButton");

advancedView.style.visibility = "hidden";

basicButton.addEventListener("click", function() {
  advancedView.style.visibility = "hidden";
  basicView.style.visibility = "visible";
})

advancedButton.addEventListener("click", function() {
  advancedView.style.visibility = "visible";
  basicView.style.visibility = "hidden";
})

#basic {
  background-color: rgb(255,0,0,.2);
}

#advanced {
  background-color: rgb(155,145,0,.2);
}

.buttonbar {
  flex-direction:row;
}

.button {
  display: inline-block;
  background-color: gainsboro;
  padding: 4px 8px;
  cursor: pointer;
}
.button:hover {
  background-color: silver;
}
#container {
  display:flex;
}
#container  > *{
  flex-grow:1;
  flex-basis:0;
}
#container  > :last-child {
  margin-left:-100%;
}

<div id="container">
  <div id="basic">
    <p>Hello world basic</p>
  </div>
  <div id="advanced">
    <p>Hello world adv</p>
    <p>Hello world adv</p>
    <p>Hello world adv</p>
    <p>Hello world adv</p>
  </div>
</div>

<div class="buttonbar">
  <div id="basicButton" class="button">
    Basic
  </div>
  <div id="advancedButton" class="button">
    Advanced
  </div>
</div>