使一個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你的課呢試試吧。

當內容溢出元素的框時使用此屬性。 當您的內容太大而無法放入指定區域時，它非常有用。