使用 Position:fixed 时的基础列强制重叠

Question

我正在使用基础创建网站的三个部分。设置如下 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

这里没有使用 position。所以要将高度扩展到 window 高度，请使用：

.sidebar {
    height: 100vh;

}

还将 class 边栏定义为：

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

Answer 2

我发现一个更老的 post 有类似的问题：

Using fixed position with a grid layout framework

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

使用 Position:fixed 时的基础列强制重叠

Foundation Columns when using Position:fixed forces an overlapp

css

zurb-foundation