右側欄與最小寬度內容重疊。

這個問題在這裏已經問過很多次了，但我還沒有找到一個確鑿的答案。右側欄與最小寬度內容重疊。

我正在努力實現左右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

右側欄與最小寬度內容重疊。

回答

相關問題