Zurb Foundation 4 - 如何创建一个完整的高度列 [英] Zurb Foundation 4 - How to create a full height column

问题描述

我想创建一个浮动面板。它需要从网格中分离并填充文档的整个高度，在左侧像SO：

I'm trying to create a floating panel. It needs be detached from the grid and fill the entire height of the document, on the left side like SO:

我的实验到目前为止： / p>

My experiment so far:

<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时的最佳做法，并且无法在其文档中找到参考。 ）

I'm not sure what is the best practice when using Foundation, and could not find a reference in their docs. Appreciate the help :)

推荐答案

您可以设置 position：fixed; 在div上你想要有max-height，然后将其高度设置为100％。我已经创建了一个快速小提琴，您可以在其中看到它的动作。

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.

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;
}

这篇关于Zurb Foundation 4 - 如何创建一个完整的高度列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！