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

Question

这个问题在这里被问了很多次，但我还没有找到一个决定性的答案。

我正在努力在我的设计中实现左右 100% 高度的固定侧边栏。左侧边栏效果很好，但当浏览器调整大小时，右侧边栏会漂浮在(最小宽度)内容上。当我将条形图的位置设置为绝对位置时，它在水平窗口调整大小时表现良好，但侧边栏不会固定在垂直滚动上。

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

(如果调整窗口大小，您可以看到右边的蓝色条 float 在中间的灰色内容上)。

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