是否可以在高度设置为auto的div上使用overflow: scroll
?
我有一个div,里面有一个无序列表。列表中的项目数量是可变的,因此我无法使用固定的高度。包含无序列表的div是滚动条需要的位置,这是我的代码:
#page {
height: auto; /* default */
overflow-y: scroll;
overflow-x: hidden;
}
如上所述,无序列表包含在#page div中。页面的高度由无序列表的值指定。有没有办法使溢出:滚动工作在像这样的可变高度的div上或者我必须使用JavaScript来执行此操作吗?
由于
答案 0 :(得分:3)
假设您有以下HTML:
<div class="main">
<div class="inner">
<ul>
<li>Some list items...</li>
...
</ul>
</div>
</div>
.main
块适合页面,例如,通过绝对定位:
.main {
border: 2px dashed blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.inner
块包含可导致滚动的导航列表:
.inner {
border: 2px dotted red;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
overflow-y: scroll;
}
在此示例中,我约束.inner
块的高度以适应.main
,
并设置overflow-y: scroll
,这将创建包含在边缘内的滚动条
集装箱区块。
您可能需要根据您的移动平台进行调整,但该概念仍然适用。
答案 1 :(得分:1)
简单地说,如果它具有可变高度(自动),它将永远不会在y轴(垂直)上溢出,因为div总是会增长以适应其内容。
overflow: scroll
将强制它显示滚动条,但它将始终被禁用,因为内容永远不会超出显示的窗格。
如果要垂直滚动,则必须以px,%或em定义高度。
如果你height: 100%
,则div将填充页面的高度,并滚动超出窗口视口高度的内容。
如果您有标题区域,请尝试以下方法:
<style>
#header {
height: 20%;
}
#body {
height: 80%;
overflow-y: auto;
}
</style>
<div id="header">
</div>
<div id="body">
</div>
答案 2 :(得分:1)
为什么不在div上使用max-height?
max-height设置元素可以展开的最大高度。我想你想要的是div永远不会离开屏幕。所以你可以设置max-height然后overflow:auto;