使一个 div 使用滚动条而不是变得更大
使一个 div 使用滚动条而不是变得更大
我有一个带有容器的导航栏。这个容器将来会包含许多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;
}
Title
navContent
Content
问题：如何使一个div使用滚动条而不是变大？
原因：当一个div内部的元素超过了div的高度时，div会自动增大以适应内容的大小。但是如果想要固定div的高度，而在内容超出时使用滚动条来显示剩余内容，就需要解决这个问题。
解决方法：可以通过设置固定的height或者max-height来限制div的高度。在这两种情况下，如果元素的大小超过了定义的高度，滚动条会自动出现。如果希望滚动条始终可见（即使内容不是那么高），可以添加overflow-y: scroll属性。
以下是实现该效果的代码示例：
div {
max-height: 200px; /*或者设置固定的height*/
overflow-y: auto; /*或者设置overflow-y: scroll*/
}
通过设置max-height属性或者固定的height属性，可以限制div的高度。当内容超出定义的高度时，滚动条会自动出现，使得用户可以滚动查看剩余的内容。
问题的原因是，当内容超出父元素的高度时，父元素会自动增长以适应内容的大小，而不会显示滚动条。
要解决这个问题，可以使用CSS的overflow属性。将父元素的overflow-y属性设置为auto，这样当内容超出父元素的高度时，会显示垂直滚动条。而不会让父元素自动增长。
以下是解决问题的代码示例：
.navbar-content {
height: 80%;
width: 50%;
background: #d9d9d9;
overflow-y: auto;
}
通过将.navbar-content的overflow-y属性设置为auto，可以确保当内容超出父元素的高度时，会显示垂直滚动条。这样，无论内容有多长，父元素的高度都不会增长，而是通过滚动条来查看全部内容。
如果你想查看完整的示例代码，可以访问这里：https://codepen.io/anon/pen/JJRrjG。
