使用位置时的基础柱:固定强制重叠

Question

我正在使用foundation创建一个站点的三个部分。使用以下html进行设置：

    <div class= "row full">
        <div class="sidebar large-2 columns">... </div>
        <div class="large-8 columns user-navbar">...</div>
        <div class="large-2 columns user-activity">...</div>
    </div> 

我也在尝试让侧边栏延伸页面的垂直长度。我一直在尝试这样做：

.sidebar {
    min-height: 100%;
    position: fixed;
}

但是，当我这样做时，它提供了用户导航栏与侧边栏的重叠。有没有办法解决这个问题？

谢谢!

Answer 1

我发现一个更老的帖子也有类似的问题：

Using fixed position with a grid layout framework

对于我正在使用的Foundation 6，我添加了"large-offset-2“类，它现在看起来很棒！

Answer 2

这里没有使用position .So来将高度扩展到窗口高度使用：

.sidebar {
    height: 100vh;

}

还要将类边栏定义为：

<div class="large-2 columns sidebar" style="background:red;height:120px">... </div>