Question

这个问题在很多时候被问过很多次，但我还没有找到一个确凿的答案。

我正努力在我的设计中实现左右100％高度，固定侧边栏。左侧边栏工作得很好，但是当浏览器调整大小时，右边的内容会浮动（min-width'd）内容。当我将条形的位置设置为绝对时，它在水平窗口调整大小时表现良好，但是侧边栏不会固定在垂直滚动上。

查看我的jsfiddle：http://jsfiddle.net/wjhzyt0u/17/

（如果您调整窗口大小，则可以看到右侧蓝色条浮在中间灰色内容上）。

HTML

<div class="wrapper">

  <section id="sidebar-nav">
  </section>

  <section id="content">
      <p>some rad stylin' content</p>
  </section>

  <section id="sidebar-notif">
  </section>

</div>

CSS

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

.wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    min-width: 450px; /* dont want to squish the content too much */
}

#sidebar-nav, #sidebar-notif {
    position: fixed;
    height: 100%;
    width: 150px;
    background: lightblue;
}
#sidebar-nav {
    top: 0;
    left: 0;
}
#sidebar-notif {
    top: 0;
    right: 0;
}

#content {
    margin: 0 150px;
    height: 300px;
    background: lightgrey;
    border: 2px solid yellow;
}

非常欢迎任何帮助！

Answer 1

我的“解决方案”适用于任何寻找类似情况的人。

我最终选择了绝对定位的侧边栏（缩放到中间内容的大小），并添加了Waypoint sticky plugin来滚动侧边栏内容。

更新了JsFiddle：http://jsfiddle.net/wjhzyt0u/20/

粘性div在滚动时粘在页面顶部 - 从而产生100％高度侧边栏的错觉。缺点是额外的js重量+页面加载时间..但我现在要接受它。

变更：

.wrapper {
    position: absolute;
    width: 100%;
    min-width: 500px; 
    // removed 100% min-height, which lets the sidebars stretch to 100% height of the content. 
}

#sidebar-nav, #sidebar-notif {
    position: absolute; // changed to absolute from fixed.
    height: 100%;
    width: 150px;
    background: lightblue;
}

// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin. 
.sticky {
    border: 1px solid red;
}

右侧边栏与最小宽度内容重叠。

1 个答案: