Zurb Foundation 4 - 如何创建全高柱答案

【问题标题】：Zurb Foundation 4 - How to create a full height columnZurb Foundation 4 - 如何创建全高柱
【发布时间】：2013-07-13 02:19:18
【问题描述】：

我正在尝试创建一个浮动面板。它需要从网格中分离出来并填充文档的整个高度，像这样在左侧：

到目前为止我的实验：

<div class="row left">
    <div class="small-3">
        <div class="panel">
            Panel HTML
        </div>
    </div>
</div>
<div class="row">
    <div class="small-6 columns"><div class="panel">Main - Content</div></div>
    <div class="small-6 columns"><div class="panel">Main - Content</div></div>
</div>

产生以下内容：

我不确定使用 Foundation 时的最佳做法是什么，并且在他们的文档中找不到参考。感谢帮助:)

【问题讨论】：

标签： html css layout web zurb-foundation

【解决方案1】：

如果发现问题在这里https://github.com/zurb/foundation/issues/226

试试这个jquery插件来同步高度https://github.com/ginader/syncHeight（我还没试过）

【讨论】：

感谢您的回复。JS 解决方案（JQ 或其他）是一种选择，但我宁愿使用 CSS 解决方法来解决它

【解决方案2】：

这家伙找到了解决全高问题的方法：

https://gist.github.com/joanhard/6375966

它也是基于 javascript 的，但与使用额外插件相比，它只是一行 javascript...

【讨论】：

【解决方案3】：

如果您在项目中使用 jQuery，我为 jQuery.syncHeight 编写了一个快速包装器，它更易于使用，具有多个实例化：

https://gist.github.com/replete/5728123

【讨论】：

【解决方案4】：

您可以在要设置最大高度的 div 上设置position: fixed;，然后将其高度设置为 100%。我创建了一个快速的fiddle，您可以在其中看到它的运行情况。

HTML：

<div class="row">
    <div class="small-4 columns" id="sidebar">
        Fixed full height
    </div>
    <div class="small-8 columns">
        Other Content
    </div>
</div>

CSS：

#sidebar{
    position: fixed;
    height: 100%;
    background: #222;
    color: #FFF;
    padding: 5px;
}

【讨论】：