如何使用Bootstrap和Rails让HTML <body>占满垂直空间？

嘿，这个问题我之前做Rails项目时也碰到过！核心原因很简单：<body>或者你的渐变容器高度默认是由内部内容撑开的，当页面内容不够长时，背景自然就会在屏幕中途“断”掉。给你几个实用的解决办法：

方法1：给根元素和容器设置100%高度 #

这是比较经典的解决方案，先让根元素（html）占满整个视口高度，再让body和渐变容器继承这个高度：

html, body {
  height: 100%;
  margin: 0; /* 去掉浏览器默认margin，避免留白或滚动条 */
  padding: 0;
}

.gradient {
  background: #43cea2;
  background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
  background: linear-gradient(to right, #185a9d, #43cea2);
  min-height: 100%; /* 用min-height而非height，确保内容超视口时容器能自动拉长 */
}

方法2：使用视口高度单位（100vh） #

这是更现代的写法，不用折腾html和body的高度，直接给渐变容器设置min-height: 100vh：

.gradient {
  background: #43cea2;
  background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
  background: linear-gradient(to right, #185a9d, #43cea2);
  min-height: 100vh; /* 100vh等于当前浏览器视口的完整高度 */
  margin: 0;
}

这种方法更简洁，还能完美适配各种屏幕尺寸，不管内容多少，容器都会至少撑满整个屏幕。

方法3：直接给body设置渐变（适合全局背景） #

如果你的渐变是整个页面的背景，不如直接把样式加在body上，一步到位：

body {
  margin: 0;
  min-height: 100vh;
  background: #43cea2;
  background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
  background: linear-gradient(to right, #185a9d, #43cea2);
}

这样整个页面的背景都会是完整的渐变，再也不会出现截断的情况啦！

小提示 #

• 尽量用min-height而不是height，这样当页面内容增多超过视口高度时，容器会自动跟着扩展，不会出现内容溢出容器的问题。
• 记得去掉body的默认margin，不然可能会出现不必要的留白或者垂直滚动条。

内容的提问来源于stack exchange，提问作者Austin Larson