html overflow issue

Question

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: http://jsfiddle.net/6APjt/

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.

Andrew · Accepted Answer · 2012-03-02 11:13:15Z

2

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

edited Mar 2, 2012 at 11:13

answered Mar 2, 2012 at 10:34

Andrew

2,0093 gold badges27 silver badges35 bronze badges

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

3 Comments

Paul D. Waite Over a year ago

I don’t think that changes the scrolling issue though, does it?

JasperTack Over a year ago

sorry for the stupid mistake:) but indeed it doesn't solve the scrolling issue.

Andrew Over a year ago

Good point, the scrollbar I saw was on the actual page, not the div. I will edit answer.

Enrique Moreno Tent · Accepted Answer · 2012-03-02 10:54:14Z

0

Your div will grow since height: auto is the default. Set it manually.

answered Mar 2, 2012 at 10:54

Enrique Moreno Tent

25.6k35 gold badges110 silver badges195 bronze badges

1 Comment

JasperTack Over a year ago

but I want that the div with class=show grows, so that the user can scroll the canvas without the header dissappearing. So it should grow horizontally and vertically, but it only grows horizontally for the moment

Collectives™ on Stack Overflow

html overflow issue

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related