獨立溢出-y在側邊欄和內容上滾動

我試圖在我的頁面上添加2個元素的獨立overflow-y滾動：#sidebar和#my-modules中的主要內容。獨立溢出-y在側邊欄和內容上滾動

正如你可以看到在這JSFiddle，它似乎並沒有工作。滾動條出現在整個文檔上，這不是我想要的。我希望設計在沒有任何滾動條的情況下充分利用瀏覽器。 #sidebar和#my-modules中的任何溢出內容都應該顯示滾動條。我也無法弄清楚如何在模塊之間添加均勻的邊距。

HTML：

<div id="top-bar" class="grid wrap"> 
    <div class="unit whole"> 
    <p>Top Bar</p> 
    </div> 
</div> 

<div id="content" class="grid wrap"> 

    <div id="sidebar" class="unit one-fifth"> 
    <p>Sidebar</p> 
    </div> 

    <div id="my-modules"> 
    <div class="unit one-third module"> 
     <p>Module 1</p> 
    </div> 
    <div class="unit one-third module"> 
     <p>Module 2</p> 
    </div> 
    <div class="unit one-third module"> 
     <p>Module 3</p> 
    </div> 
    <div class="unit half module"> 
     <p>Module 4</p> 
    </div> 
    <div class="unit half module"> 
     <p>Module 5</p> 
    </div> 
    <div class="unit whole module"> 
     <p>Module 6</p> 
    </div> 
    </div> 
</div>

CSS：

body, 
html { 
    height: 100%; 
    font-family: Arial, sans-serif; 
    font-size: 0.875em; 
    padding: 0; 
    margin: 0; 
} 

#top-bar, 
#sidebar, 
.module { 
    background: rgba(0, 0, 0, 0.1); 
} 

#content { 
    height: 100%; 
} 

#sidebar { 
    height: 100%; 
} 

#my-modules { 
    float: left; 
    width: 80%; 
    padding: 0; 
    overflow-y: auto; 
} 

.module { 
    height: 220px; 
}

來源

2016-03-01 mapr

如果你在＃我的模塊設置的高度。你會得到一個滾動條。因爲你沒有設置高度，所以div會擴展以適應內容。

來源

2016-03-01 18:40:22

你說得對 - 那是有效的！任何想法如何在'＃my-modules'中的模塊之間獲得均衡的利潤？ – mapr

取決於您的意思是甚至是利潤率。如果你以百分比設置你的寬度，那麼我會爲邊距做同樣的處理。您只需根據您的利潤計算模塊寬度。如果你想要固定大小的間隔，那麼我可能會做一些像'width：calc（30％ - 40px）; margin：0 20px;'例如 –

好吧，讓我試試這個。按我的意思是，我只想在模塊之間添加一些間距。如果我使用了'margin：10px;'，那麼如果它們在彼此的頂部或底部，那麼一些模塊將最終增加20px。 – mapr

獨立溢出-y在側邊欄和內容上滾動

回答

相關問題