html - Zurb Foundation 4 - 如何创建全高柱

Question

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

---

到目前为止我的实验：

<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 时的最佳做法是什么，并且在他们的文档中找不到参考。感谢帮助:)

Answer 1

You can set position: fixed; on the div you want to have max-height, then set its height to a 100%. I have created a quick fiddle where you can see it in action.

The HTML:

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

The CSS:

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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