css - 带有粘性页脚的居中注册表单框，调整大小问题

Question

这是我目前所拥有的示例:

https://codepen.io/anon/pen/jQZpNw

我的目标是使位于页面中央的框居中，并让其余元素做出适当的响应。我最终使用 margin-top: 10%; 作为使框居中的方法，但这种方法的问题是在较小的浏览器高度上用户将不得不滚动。它也没有完全居中。

理想情况下，我正在寻找的是:

• 将框居中(垂直和水平)
• 在浏览器高度较小的情况下，中心框应位于导航栏正下方并留有小边距，以消除浏览器较小时的滚动。
• 当浏览器高度非常小时，在页脚和框之间留出一个间隙来粘贴页脚。
• 当中心框扩展其内容或导航栏扩展其内容时，其他所有内容都应适当移动且不重叠。

我制作了一些 javascript 按钮来扩展导航栏和中心框，以便更容易进行试验。我的实际应用明显不同，这是我现有应用的精简版。

当我使用 calc() 将它设置为小浏览器高度的中心时，页脚或导航栏会与框重叠，我尝试了很多不同的方法来让它工作但没有运气。我现在没主意了，CSS 也不是我的强项。谢谢!

Answer 1

您可以尝试使用页眉、页脚和您想要居中的 div 的整页包装器。使用 display:flex; 并将 flex-direction 设置为 column 和 justify-content: space-between;您基本上可以将 div 居中。如果您的页眉和页脚大小不同，它会稍微偏离一点，但您不需要大量的媒体查询或难以维护的代码。将包装器的 min-height 设置为 100vh 并且您的页脚将是粘性的，除非窗口太短而无法容纳所有部分。

$('#nav-button').on('click', function(e) {
  e.preventDefault();
  $('#nav-content').toggleClass('expand');
});

header {
  background: red;
  padding: 5px;
}

header a {
  color: white;
}

#nav-content {
  height: 0;
  transition: height .3s;
}

#nav-content.expand {
  height: 300px;
}

footer {
  color: white;
  background: red;
  padding: 5px;
}

#centered-box {
  height: 200px;
  width: 200px;
  background: green;
  margin: 10px auto;
}

#wrap {
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
  <header>
    <nav>
      <a href='#' id="nav-button">Expand</a>
      <div id="nav-content"></div>
    </nav>
  </header>

  <div id="centered-box"></div>

  <footer>This is the footer</footer>
</div>