与 Rails 3.2 和 SASS 一起使用的 CSS 问题答案

【问题标题】：Issue with CSS working with Rails 3.2 and SASS与 Rails 3.2 和 SASS 一起使用的 CSS 问题
【发布时间】：2012-03-29 11:35:39
【问题描述】：

我正在使用 Rails 3.2 创建一个新网站，但我无法获取 CSS 以使页面占据整个浏览器窗口。但是有一个问题：我无法获得填充页面的高度，它总是只填充必要的部分。

我已尽一切可能实现这一点，我什至使用了与我前段时间制作的另一个 Rails 网站完全相同的 CSS（使用 Rails 3.0.5，没有 SASS），但它就是行不通，高度要么不填满屏幕，要么溢出屏幕，在不应该的时候创建一个滚动条。

也许 SASS 是这里的问题？我正在使用一些混合渐变，圆形边框，没有太大。

我目前的 CSS 是这样的（仅重要部分）：

html {
  @include no_space;
  height: 100%;
  display: block;
}

root {
  @include no_space;
  height: 100%;
  display: block;
}

body {
  @include no_space;
  display: block;
  text-align: center;
  /*    top: 0px;*/
  font-family: "Helvetica", Verdana, Arial;
  color: $text_color;
  background-color: $background;
}

.site {
  @include gradient(white, $background);
  height: 100%;
  display: block;
}

no_space mixin 仅包含 2 行表示边距和填充为 0。

如果我在此处向正文添加“高度：100%”，则页面会溢出相当于页脚空间。顺便说一句，.site div 包含实际网站，并且是 body 的子级，页脚 div 也是 body 的直接子级。

哦，不，我的没有其他 CSS 文件，我用 Firebug 仔细检查过

【问题讨论】：

您是否尝试过降低 .site div 的高度百分比？尝试使用小于 100% 的高度，看看该解决方案是否合适。我不认为它特定于 SASS。
我不想用资源来计算百分比，我以前做过一些这样的网站，而且它们都运行良好，但如果我无法找到另一种方法来做到这一点我会试试的。

标签： ruby-on-rails css sass

【解决方案1】：

你有没有试过把body的高度变成100%：

body {
  height: 100%;
}

【讨论】：

是的，正如我所说，当我这样做时，页面溢出并且页脚不再可见
@RodrigoCastro 不显示 SASS 源代码，而是显示 SASS 生成的 CSS。那会更有帮助。