时间戳

首页 > 解决方案 > 当内容的高度发生变化时，保持项目在同一点垂直对齐

html - 当内容的高度发生变化时，保持项目在同一点垂直对齐

问题描述

我正在创建一个包含三个步骤（选项卡）的表单，每个选项卡包含表单的不同部分并且高度不同。我希望最大的选项卡在页面上垂直居中，另外两个垂直对齐到最大选项卡的顶部。我尝试了不同的 CSS 选项，但似乎无法让它工作，我附上了我的代码以及我预期结果的 gif。感谢您抽出时间来阅读！

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
}

function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
}
body {
  height: 100vh;
  margin: 0;
  display: grid;
  align-content: center;
}

#regForm {
  background-color: #ffffff;
  padding: 40px;
  width: 50%;
  min-width: 300px;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

input.invalid {
  background-color: #ffdddd;
}

.tab {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <form id="regForm" action="">

        <h1>Register:</h1>
        
        <div class="tab">Name:
          <p><input placeholder="First name..." oninput="this.className = ''"></p>
          <p><input placeholder="Last name..." oninput="this.className = ''"></p>
        </div>
        
        <div class="tab">Contact Info:
          <p><input placeholder="E-mail..." oninput="this.className = ''"></p>
          <p><input placeholder="Phone..." oninput="this.className = ''"></p>
          <p><input placeholder="Address" oninput="this.className = ''"></p>
          <p><input placeholder="Fax" oninput="this.className = ''"></p>
        </div>
        
        <div class="tab">Birthday:
          <p><input placeholder="dd" oninput="this.className = ''"></p>
          <p><input placeholder="mm" oninput="this.className = ''"></p>
          <p><input placeholder="yyyy" oninput="this.className = ''"></p>
        </div>
        
        <div style="overflow:auto;">
          <div style="float:right;">
            <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
            <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
          </div>
        </div>
        </form>
    <script src="app.js"></script>
</body>
</html>

预期结果

标签： htmlcssformscss-gridresponsive

解决方案

使用 CSS 网格来定义布局并使所有选项卡彼此重叠（在同一网格区域上），然后依赖可见性而不是显示。

您只需要在代码中添加 2 个 CSS 声明：

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.visibility = "visible";
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
}

function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  x[currentTab].style.visibility = "hidden";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
}
body {
  height: 100vh;
  margin: 0;
  display: grid;
  align-content: center;
}

#regForm {
  background-color: #ffffff;
  padding: 40px;
  width: 50%;
  min-width: 300px;
  display:grid; /* added */
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

input.invalid {
  background-color: #ffdddd;
}

.tab {
  visibility:hidden;
  grid-area:2/1; /* added */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <form id="regForm" action="">

        <h1>Register:</h1>
        
        <div class="tab">Name:
          <p><input placeholder="First name..." oninput="this.className = ''"></p>
          <p><input placeholder="Last name..." oninput="this.className = ''"></p>
        </div>
        
        <div class="tab">Contact Info:
          <p><input placeholder="E-mail..." oninput="this.className = ''"></p>
          <p><input placeholder="Phone..." oninput="this.className = ''"></p>
          <p><input placeholder="Address" oninput="this.className = ''"></p>
          <p><input placeholder="Fax" oninput="this.className = ''"></p>
        </div>
        
        <div class="tab">Birthday:
          <p><input placeholder="dd" oninput="this.className = ''"></p>
          <p><input placeholder="mm" oninput="this.className = ''"></p>
          <p><input placeholder="yyyy" oninput="this.className = ''"></p>
        </div>
        
        <div style="overflow:auto;">
          <div style="float:right;">
            <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
            <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
          </div>
        </div>
        </form>
    <script src="app.js"></script>
</body>
</html>

推荐阅读