固定高度元素中的可选非滚动标题

时间:2012-06-05 02:21:35

标签: css

我有一个固定大小的框,设置为在溢出时滚动。但是,有时它有一个标题,有时它没有;当标题出现时,我无法找到一种方法来使其看起来很好看。我确切地知道它为什么会发生(标题将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)保持在最顶层(即不与他的朋友滚动)。

2 个答案:

答案 0 :(得分: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指定width,但不是height

.scrollable指定heightoverflow: auto以允许其内容滚动。

当我们有一个.stays-at-top + .scrollable和一个.stays-at-top元素彼此紧邻时,即当我们有一个固定的标题时,

.scrollable匹配。在这里,我们添加margin-top以启用第一项清除固定标头,并将height值重置为.scrollable中指定的值减去margin-top值。

.stays-at-top需要position: fixedwidth匹配width中的.fixed-size

答案 1 :(得分:0)

只需将scrollable课程移至家长,然后移除height:100%width:100%,并将overflow-y:auto更改为overflow:auto

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