我有这个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。
发布于 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;
}
发布于 2018-10-29 19:53:11
我也有与PrimeNG p_Dialog内容类似的问题,我修复了contentStyle的以下样式
height: 'calc(100vh - 127px)'
发布于 2015-04-23 14:28:07
使用以下命令:
style="height: 150px; max-height: 300px; overflow: auto;"
固定一个高度,它将是默认的高度,然后滚动条就会进入整个高度
https://stackoverflow.com/questions/10980822
复制相似问题