我有一个固定大小的框,设置为在溢出时滚动。但是,有时它有一个标题,有时它没有;当标题出现时,我无法找到一种方法来使其看起来很好看。我确切地知道它为什么会发生(标题将100% - 高度滚动元素向下推出并从容器中移出),但我无法找出一种非表格方式来修复它。 Here's the fiddle显示问题;以及SO档案的完整代码:
HTML:
<div class="fixed-size">
<ul class="scrollable">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
</div>
<div class="fixed-size">
<div class="stays-at-top">
Header
</div>
<ul class="scrollable">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
</div>
CSS:
.fixed-size {
height: 100px;
width: 200px;
display: inline-block;
background-color: #fcc;
}
.scrollable {
height: 100%;
width: 100%;
overflow-y: auto;
}
.stays-at-top {
background-color: #f99;
}
如果不清楚,我希望标题(.stays-at-top
)保持在最顶层(即不与他的朋友滚动)。
答案 0 :(得分:1)
.fixed-size {
width: 200px;
display: inline-block;
background-color: #fcc;
}
.scrollable {
height: 100px;
overflow: auto;
}
.stays-at-top + .scrollable {
margin-top: 17px;
height: 83px;
}
.stays-at-top {
background-color: #f99;
position: fixed;
width: 200px;
}
这应该满足全部要求。
.fixed-size
指定width
,但不是height
。
.scrollable
指定height
和overflow: auto
以允许其内容滚动。
.stays-at-top + .scrollable
和一个.stays-at-top
元素彼此紧邻时,即当我们有一个固定的标题时, .scrollable
匹配。在这里,我们添加margin-top
以启用第一项清除固定标头,并将height
值重置为.scrollable
中指定的值减去margin-top
值。
.stays-at-top
需要position: fixed
和width
匹配width
中的.fixed-size
。
答案 1 :(得分:0)
只需将scrollable
课程移至家长,然后移除height:100%
,width:100%
,并将overflow-y:auto
更改为overflow:auto
。