100％高度响应侧边栏

Question

如何使用响应式网格系统设置全高侧栏，类似于bootstrap？

我正在运行它的问题是.main包装器div折叠到.primarycol div的高度。

我使用pull和push类来调整视觉布局，因此.secondarycol div在左侧看起来像它，即使它位于.primarycol div之后代码。

<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>

通常没有.secondarycol`类，div会看起来像这样。

我尝试将min-height:100%添加到.main div和height:100%添加到body标记，但这使得main div高度仅为浏览器窗口的高度而不是内容。

关于如何解决这个问题的任何建议都非常受欢迎。

这是我的基础结构的代码。 http://codepen.io/onebitrocket/pen/ZYQLMm/

我已添加到第三列以及一些页面需要一个。

列系统基于bootstraps，但我认为它是一个改进的版本： 列类从最小大小到最大大小声明。 我还更改了类名以指示断点大小，而不是xs，sm，md，lr等。

由于

Answer 1

至少在chrome上你需要在html标签上设置高度。试试吧 - http://jsfiddle.net/27kze60s/

html, body { height: 100%; }

Answer 2

修正了，感谢大家的建议

我已将以下内容添加到css中 height:100%到body min-height:100%到.main overflow:-y：自动转至.secondarycol

我已更新了codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/