css - 如何在蓝图中扩展页面的高度？

Question

使用 blueprint.css，有没有办法拉伸(stretch) <div>到页面的高度？我知道如何用纯 CSS 来实现，但我发现没有任何建议可以用蓝图来实现，所以我只剩下 <div> 了。背景在页面中途停止(看起来很糟糕)。

Answer 1

没有用于此的蓝图类，快速 grep 将显示必要的 CSS 未出现在元素中。

Compass 用一组 stretch mixins 来处理它. stretch-y 将以下 CSS 添加到元素中:

bottom: 0;
position: absolute;
top: 0;

由于绝对定位元素不与 float 交互，因此您需要在 div 中使用 background-color 的  你想要的和适当的 width (即给它正确的 span-# 类)。

纯粹表现形式的 div 感觉像是一个 hack，但我比 Faux Column 更喜欢它方法。

您可能想要包括:

html, body {
    height: 100%;
}

和下面的容器，给它 100% 的高度，所以 div 的绝对定位发生在它里面:

min-height: 100%;
height: auto !important;
height: 100%;
position: relative;

甚至可能是这个IE hack ，尽管它可能只需要一个页脚:

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->