Question

现在，标题可能听起来像最懒的问题，但请耐心等待。

我网站的大致结构格式为：

<html>
  <head></head>

  <body>
    <div class="navbar"></div>
    <div class="container"></div>
  </body>
</html>

视图由bootstrap设置，覆盖的css放在

中

app/assets/stylesheets/bootstrap_and_overrides.css.less

现在，我尝试更改正文和容器的高度和 min-height ;

body {
  min-height: 100%;
}
.container {
  min-height: 100%;
}

等，但结果出乎意料。

如果我将container的高度增加到超过body的高度，它会溢出body的边界，而不是body相应增长以匹配它。以类似的方式，如果我减少 body的高度低于container的高度，container将不会缩小以匹配body }。

我对CSS不是很精通，所以我可能会忽略一些非常基本的东西，所以任何帮助或指针都会受到赞赏。

Answer 1

试试这个，

body {
  height: 100%;
}
.container {
  height: 100%;
}

，或者

body {
  max-height: 100%;
}
.container {
  height: 100%;
}