css - 100% 高度响应侧边栏

Question

我如何使用类似于 Bootstrap 的响应式网格系统来设置全高侧边栏？

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

我正在使用拉和推类来调整视觉布局，因此 .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%; }