Question

这是到目前为止我所拥有的例子：

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

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

将框居中（垂直和水平）
在较小的浏览器高度上，中心框应位于导航栏的下方，并留有少量空白，以消除在较小的浏览器上的滚动。
当浏览器高度很小时，在页脚和框之间留出一定的间隙，使页脚变粘。
当中心框扩展其内容或导航栏扩展其内容时，其他所有内容都应适当移动并且不重叠。

我做了一些JavaScript按钮来扩展导航栏和中心框，以便更轻松地进行实验。我的实际应用显然与众不同，这是我所拥有的精简版本。

我尝试了很多不同的方法来使它正常运行，当我使用calc（）将其设置为较小浏览器高度的中心时，页脚或导航栏将与框重叠。我现在没主意了，CSS不是我的强项。谢谢！

Answer 1

您可以尝试整页包装，其中包含标题，页脚和要居中的div。将display:flex;设置为flex-direction和column的{{1}}可以使div居中。如果您的页眉和页脚大小不同，将会有点问题，但是您不需要大量的媒体查询或难以维护的代码。将包装器的justify-content: space-between;设置为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;
}

Answer 2

您是否在CSS中完全使用了媒体查询？如果浏览器窗口大小在查询范围之内，则媒体查询允许您以某种方式设置元素的样式。

页脚居中的注册表单框居中，调整大小问题

2 个答案: