使一个div使用滚动条，而不是越来越大

Question

我有一个导航栏，里面有一个容器。这个容器以后会容纳很多div。它应该像树视图一样。我想让导航栏从上到下填充整个左侧。但是，当内容越来越大，它应该停止增长，应该会出现一个滚动条。

使用height: 100%不起作用，因为目前我的导航栏是空的，所以酒吧是一个小的。

在这里，我附上了两张照片，显示我需要什么。我希望酒吧“navContent”填充，直到它到达底部栏。

在这里你可以看到一个工作拨弄着一个完整的概述，我希望黄条增长，直到它到达底部。

* { 
 
    margin: 0; 
 
} 
 

 
.bar { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: auto; 
 
} 
 

 
#navBar { 
 
    height: 100%; 
 
} 
 

 
#btnBar { 
 
    height: 40px; 
 
} 
 

 
#navContent { 
 
background-color: yellow; 
 
} 
 

 
#wrapper { 
 
    margin: 0; 
 
} 
 

 
#navBar { 
 
    float: left; 
 
    width: 30%; 
 
    overflow: hidden; 
 
} 
 

 
#mainContainer { 
 
    float: left; 
 
    width: 70%; 
 
    overflow: hidden; 
 
} 
 

 
#header { 
 
    height: 50px; 
 
    background-color: red; 
 
} 
 

 
#headerContent { 
 
    height: 100%; 
 
    width: 80%; 
 
} 
 

 
#headerTitle { 
 
    margin: auto; 
 
} 
 

 
.headerBtn { 
 
    margin: 0px 10px 0px 10px; 
 
} 
 

 
#footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 

 
#footerContent { 
 
    height: 100%; 
 
} 
 

 
.footerBtn { 
 
    margin: 0px 20px 0px 20px; 
 
} 
 

 
#mainContainer { 
 
    height: 100%; 
 
    background-color: inherit; 
 
}

<div id="header"> 
 
    <div id="headerContent" class="bar"> 
 
     <p id="headerTitle">Title</p> 
 
     <button class="btn headerBtn">Profile</button> 
 
     <button class="btn headerBtn">Logout</button> 
 
    </div> 
 
    </div> 
 

 
    <div id="wrapper"> 
 

 
    <div id="navBar"> 
 
     <div id="btnBar" class="bar"> 
 
     <button class="btn navBtn">New Folder</button> 
 
     <button class="btn navBtn">New File</button> 
 
     <button class="btn navBtn">Delete</button> 
 
     </div> 
 
     <div id="navContent"> 
 

 
     navContent 
 

 
     </div> 
 
    </div> 
 

 
    <div id="mainContainer"> 
 
     Content 
 
    </div> 
 

 
    </div> 
 

 
    <div id="footer"> 
 
    <div id="footerContent" class="bar"> 
 
     <button class="btn footerBtn">Help</button> 
 
     <button class="btn footerBtn">Conditions</button> 
 
     <button class="btn footerBtn">Terms</button> 
 
     <button class="btn footerBtn">Imprint</button> 
 
    </div> 
 
    </div>

Answer 1

在这里，你可以查看我在这里所做的：https://codepen.io/anon/pen/JJRrjG。我使用溢出属性：https://developer.mozilla.org/en/docs/Web/CSS/overflow?v=example和百分比的高度。代码如下：

https://codepen.io/anon/pen/JJRrjG

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    color: #fff; 
 
    font-family: sans-serif; 
 
} 
 
.top { 
 
    height: 10%; 
 
    background: #111; 
 
} 
 
.navbar { 
 
    height: 10%; 
 
    background: #444; 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
    padding: 0.5%; 
 
    text-align: center; 
 
} 
 
.navbar span { 
 
    margin: 10px; 
 
} 
 
.navbar-content { 
 
    height: 80%; 
 
    width: 50%; 
 
    background: #d9d9d9; 
 
    overflow-y: auto; 
 
} 
 
.everything { 
 
height: 100%; 
 
} 
 
.filler-space { 
 
    height: 10000px; 
 
    background: blue; 
 
    width: 70%; 
 
    margin: 10px auto; 
 
    color: #fff; 
 
}

<div class="everything"> 
 
<div class="top"></div> 
 
<div class="navbar"> 
 
    <span>New folder</span> 
 
    <span>New file</span> 
 
    <span>Delete</span> 
 
</div> 
 
<div class="navbar-content"> 
 
    <div class="filler-space">I take up a lot of space</div> 
 
    </div> 
 
<div>

Answer 2

我想你可能会寻找：

overflow-y: scroll; 

Answer 3

您只需设置无论是固定height或max-height。在这两种情况下，如果元素增长超过定义的高度，滚动条将自动出现。

如果你想滚动条总是可见的（即使含量不高），你可以添加overflow-y: scroll

Answer 4

使用属性overflow: auto你的课呢试试吧。

当内容溢出元素的框时使用此属性。 当您的内容太大而无法放入指定区域时，它非常有用。