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

这个问题在这里已经问过很多次了，但我还没有找到一个确凿的答案。右侧栏与最小宽度内容重叠。

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

看看我的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; 
}

任何帮助将是非常欢迎！

来源

2014-09-11 Sarah

我的'解决方案'为其他人寻找类似的情况。

我最终用绝对定位的边栏（缩放到中间内容的大小），并添加了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; 
}

来源

2014-09-23 05:07:36 Sarah

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

回答

相关问题