Properly overflow without using javascript to set a static height?

Question

The problem is simple:

In the left example, I have the whole thing scrolling, which works fine because I can set the scrolling div's height to 100%. In the right example, it doesn't work, because I don't know what my scrolling div's height should be, because it's sharing that space with another element. If I set it to 100%, it overflows from its container, causing the 2nd scrollbar that you see in the example.

I know I can use javascript to set the .scroll-container's height to (container height - height of the header), but is there a pure css solution to this problem? I hate having to use javascript for this, especially because when the window resizes, I have to recalculate the size of the scrolling div.

Edit: Sorry, I wasn't very clear. What I want is for the header to remain static at the top, while the list itself is scrollable.

Yes, that's exactly the behavior I'm looking for, except with that solution the bottom of the list is cut off. — Bob Lauer
– Bob Lauer, Commented Oct 18, 2012 at 16:23
Looks like the problem remains. If you look at the scroll bar on the right, you can see the bottom arrow is cut off. Which makes sense, since that div's height is set to 100%, but the header above it is pushing it down some. — Bob Lauer
– Bob Lauer, Commented Oct 18, 2012 at 16:30

Afshin · Accepted Answer · 2012-10-18 18:24:06Z

2

I think this is maybe helpful

.scroll-container {
    overflow: auto; 
    padding-top:20px;    
}

#ex2 span{
position:absolute;
    background:white;
}

jsFiddle

answered Oct 18, 2012 at 18:24

Afshin

4,2253 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bob Lauer Over a year ago

Thanks, I may actually end up going this route since I know my header's height will be static. If the header height was unknown at design time, your solution wouldn't work without setting the padding-top to the header's height with javascript.

meadowstream · Accepted Answer · 2012-10-18 16:45:54Z

2

Set overflow: y-scroll; on #ex2 and it will behave as #ex1.

#ex1, #ex2 {
    float: left;
    height: 100%; 
    width: 45%;
    border: 1px solid black;   
    overflow: auto;   
}

#ex2 { overflow: y-scroll; }

Demo

answered Oct 18, 2012 at 16:45

meadowstream

4,1592 gold badges22 silver badges24 bronze badges

4 Comments

Bob Lauer Over a year ago

I just edited the original question, but what I want is for the header to stay static while the list scrolls.

meadowstream Over a year ago

Is it important that the header is inside the scroller?

Bob Lauer Over a year ago

No, in fact I don't want the header to be inside the scroller, but it does need to stay inside of #ex2. So I want the header to stay where it's at, at the top, while the rest of the list scrolls.

Bob Lauer Over a year ago

I think it's probably as close to a pure css solution as there is tbh. It's not perfect, because the content is actually extending past the container. You can see this easier if you put a red border around the .wrapper element, as I did here: jsfiddle.net/boblauer/MdgTs

Collectives™ on Stack Overflow

Properly overflow without using javascript to set a static height?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related