100% 高度响应侧边栏

Question

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

我运行它遇到的问题是

.main

包装器 div 折叠到

.primarycol

div 的高度。

我使用拉和推类来调整视觉布局，因此

.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/

Answer 3

尝试更新

document.body.scrollHeight

。