独立溢出-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在侧边栏和内容上滚动

回答

相关问题