如何在蓝图中展开页面的高度

Question

使用blueprint.css，是否有办法将<div>拉伸到页面的高度?我知道如何在纯CSS中做到这一点，但我没有发现任何建议如何用蓝图来做到这一点，所以我留下了一个<div>，它的背景停在页面的一半(看起来很糟糕)。

Answer 1

没有相应的Blueprint类，快速grep将显示所需的CSS没有显示在项目中。

Compass用一组拉伸混合来处理它。stretch-y为元素添加了以下CSS:

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

由于绝对定位的元素不与浮动相互作用，您需要div中的 与您想要的background-color和适当的width(即给它正确的span-# class)。

纯粹表示的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]-->