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

Question

使用blueprint.css，有没有办法将<div>拉伸到页面的高度？我知道如何在纯CSS中做到这一点，但我发现的任何内容都没有建议如何使用蓝图，所以我留下了<div>，其背景在页面中间停止（看起来很糟糕） ）。

Answer 1

没有Blueprint类，快速grep将显示项目中没有显示必要的CSS。

指南针用一组stretch mixins处理它。 stretch-y将以下CSS添加到元素中：

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

由于绝对定位元素不与浮点数交互，因此您需要 中div的{​​{1}}和background-color所需的width（{1}}（即给它正确的跨度 - #class）。

纯粹的表现性div感觉就像一个黑客，但我比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]-->