Question

I have a fixed-size box that is set to scroll when it overflows. However, sometimes it has a header, and sometimes it doesn’t; and I can’t figure out a way to style it to look well when the header appears. I know exactly why it happens (the header pushes the 100%-height scrolling element down and out of its container), but I can’t figure out a non-table way to fix it. Here’s the fiddle showing the problem; and the full code for SO archives:

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;
}​

If it’s not clear, I want the header (.stays-at-top) to stay at the top (i.e. not scroll with his friends).

Answer 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;
}​

This should meet the full requirements.

.fixed-size specifies a width, but not a height.

.scrollable specifies a height and overflow: auto to allow its contents to scroll.

.stays-at-top + .scrollable matches when we have a .stays-at-top and a .scrollable element immediately adjacent to each other, i.e. when we have a fixed header. Here we add a margin-top to enable the first item to clear the fixed header, and reset the height value to the value specified in .scrollable minus the margin-top value.

.stays-at-top requires position: fixed and a width matching the width in .fixed-size.