无固定高度的滚动条/带滚动条的动态高度
无固定高度的滚动条/带滚动条的动态高度
提问于 2012-06-11 21:15:24
我有这个HTML结构：
<div id="body">
<div id="head">
<p>Dynamic height without scrollbar</p>
</div>
<div id="content">
<p>Dynamic height with scrollbar</p>
</div>
<div id="foot">
<p>Fixed height without scrollbar</p>
</div>
</div>我希望在主体部分(#body)内有三个部分，而不会溢出。所以我需要在中间部分有一个滚动条。
我尝试过这个CSS：
#content{
border: red solid 1px;
overflow-y: auto;
}还有这个：
#content{
border: red solid 1px;
overflow-y: auto;
height: 100%;
}但这两种方法都不起作用。
我在JSFiddle做了一个例子。
我可以只使用CSS和HTML来做这件事吗？我更倾向于避免使用Javascript。
回答 10
Stack Overflow用户
回答已采纳
发布于 2016-08-24 21:27:55
Flexbox是一种现代化的替代方案，可以让你在没有固定高度或JavaScript的情况下做到这一点。
在容器上设置display: flex; flex-direction: column;，在页眉和页脚div上设置flex-shrink: 0;可以做到这一点：
HTML：
<div id="body">
<div id="head">
<p>Dynamic size without scrollbar</p>
<p>Dynamic size without scrollbar</p>
<p>Dynamic size without scrollbar</p>
</div>
<div id="content">
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
</div>
<div id="foot">
<p>Fixed size without scrollbar</p>
<p>Fixed size without scrollbar</p>
</div>
</div>CSS：
#body {
position: absolute;
top: 150px;
left: 150px;
height: 300px;
width: 500px;
border: black dashed 2px;
display: flex;
flex-direction: column;
}
#head {
border: green solid 1px;
flex-shrink: 0;
}
#content{
border: red solid 1px;
overflow-y: auto;
/*height: 100%;*/
}
#foot {
border: blue solid 1px;
height: 50px;
flex-shrink: 0;
}Stack Overflow用户
发布于 2018-10-29 19:53:11
我也有与PrimeNG p_Dialog内容类似的问题，我修复了contentStyle的以下样式
height: 'calc(100vh - 127px)'Stack Overflow用户
发布于 2015-04-23 14:28:07
使用以下命令：
style="height: 150px; max-height: 300px; overflow: auto;" 固定一个高度，它将是默认的高度，然后滚动条就会进入整个高度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10980822
复制相关文章
相似问题
腾讯云开发者
