如何使两个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的另一种想法，其中考虑负边距以允许重叠并依靠拉伸行为具有相同的高度：

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>