我遇到一个问题，即设置了 visibility: hidden; 的元素仍然占据空间，即使同时设置了 max-height: 0; ，这也会导致右侧出现滚动条。
JSFiddle example
function next(id) {
// list of screens
screens = ["main-screen", "input-screen", "questions-screen", "results-screen", "compare-screen"];
// hide current page, display next page
document.getElementById(screens[id-1]).classList.toggle("hidden");
document.getElementById(screens[id-1]).classList.toggle("visible");
document.getElementById(screens[id]).classList.toggle("hidden");
document.getElementById(screens[id]).classList.toggle("visible");
}
.center {
text-align: center;
height: 100vh !important;
}
.screen {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Work Sans';
}
.no-height {
max-height: 0;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 0.75s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.75s linear;
max-height: 0;
}
<div class="container center">
<!-- 1. Main Title Screen -->
<div class="screen main-screen visible" id="main-screen">
<p>Find your Archivibe</p>
<button class="btn btn-primary" id="1" onclick="next(this.id)">Begin</button>
<button onclick="document.getElementById('input-screen').style.display='none';">Remove element</button>
</div>
<!-- 2. Input details -->
<div class="screen input-screen hidden" id="input-screen">
<h2>First, some info about yourself</h2>
<div class="form-div">
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="region" class="form-label">Region</label>
<input type="text" class="form-control" id="region">
</div>
<div class="mb-3">
<label for="gender" class="form-label">Gender</label>
<input type="text" class="form-control" id="gender">
</div>
<div class="mb-3">
<label for="age" class="form-label">Age</label>
<input type="number" class="form-control" id="age" min="1">
</div>
<button type="button" class="btn btn-primary" id="2" onclick="next(this.id)">Submit</button>
</form>
</div>
</div>
</div>
如您在示例中所见，通过方便地放置的按钮移除隐藏元素（会减少）滚动条的长度。在我的本地工作区中，这样做将会完全移除滚动条，从而解决问题。
请问不使用 display: none; 有没有其他解决办法？因为那样做会使得我希望保留的淡入过渡效果失效。非常感谢！