0

我有一个固定大小的框，它设置为溢出时滚动。然而，有时它有一个标题，有时它没有；当标题出现时，我想不出一种方法来让它看起来很好看。我确切地知道它为什么会发生（标题将 100% 高度的滚动元素向下推出其容器），但我想不出一种非表格的方法来修复它。这是显示问题的小提琴；以及 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) 保持在顶部（即不要与他的朋友一起滚动）。

4

2 回答 2

1

http://jsfiddle.net/EyPQW/6/

.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指定 a width，但不指定 a height。

.scrollable指定 aheight并overflow: auto允许其内容滚动。

.stays-at-top + .scrollable.stays-at-top当我们有一个和一个.scrollable元素彼此紧邻时匹配，即当我们有一个固定的标题时。这里我们添加一个margin-top来使第一项可以清除固定表头，并将值重置为height中指定的值.scrollable减去该margin-top值。

.stays-at-top需要position: fixed和width匹配的widthin .fixed-size。

于 2012-06-05T02:45:37.697 回答
0

只需将scrollable类移动到父级并删除height:100%, width:100%，然后将 更改overflow-y:auto为overflow:auto。

因此：http: //jsfiddle.net/jglovier/U8rPj/4/

于 2012-06-05T02:29:29.010 回答