html overflow problem


I already asked this question, but I didn't explain it too well, so I removed the thread. Now I have made an example in jsfiddle to show my problem:

I want a page with a header and below that a canvas. This canvas expands when I click on the zoom button. When this canvas expands there is an overflow that I want to be visible with scrolling. This is because I want the header of the page visible all the time, also when I scroll to the bottom of the canvas.

In the example you see that i have used a div with style overflow set to hidden (to prevent that when you scroll, the whole pages is scrolled). I tried to solve this by adding another div in this div with the property overflow set to scroll. This solves the vertical scroll, but I can't scroll horizontally.

Your problem is in your javascript!

testcanavs.height *= 1.25;

There is a spelling error in there, change it to this and it will work

testcanvas.height *= 1.25;

EDIT: Try setting height, or max-height on your containing div. See this fiddle