0

I have been trying different ways to set my canvas height to 100% so that it removes the vertical scroll bar, but for some reason it is not working?

Can anyone give me any pointers please?

I have uploaded my site here and you will see that there is a slider in operation. There are two images and the slider is designed to show the old image under the new image.

Again, any help is greatly appreciated.

Thanks.

Improve this question

2 Answers 2

Reset to default
1

This should work:

<style type="text/css"> 
html, body { padding: 0; margin: 0; height: 100%; }
#canvas { min-height: 100%; }
</style>

And if you still have issues, make sure you don't have any additional padding and margin in unwanted places.

You can also add overflow: hidden; on the body to get rid of the scrollbars for good.

Improve this answer
7
  • Thanks for your help! Its done it but checking on iPad I have a big white bar at the bottom! Any ideas how to amend this? Thanks for your help! :)
    – PrimalScientist
    Commented Jan 26, 2014 at 16:39
  • Do you have any other html element inside your <body>, you might need to set their margin and padding to 0 as well. It happens often with img or p tags. But I never had that issue happening only on iPad :/
    – Skwal
    Commented Jan 26, 2014 at 16:53
  • Will take a look and let you know! Thanks for this ;)
    – PrimalScientist
    Commented Jan 26, 2014 at 17:13
  • I cant work it out? Take a look: [quirktools.com/screenfly/#u=http%3A//www.bbk.ac.uk/%7Edmcken03/…
    – PrimalScientist
    Commented Jan 26, 2014 at 19:00
  • 1
    Hey @PrimalScientist, I managed to reproduce the behavior on my iphone, but as soon as I zoom in or out, the Js adjusts and the gap is gone. Might be the initial calculation that has a problem. Or it could just be webkit itself, have a look here (there are several things to try there).
    – Skwal
    Commented Jan 26, 2014 at 19:38
1

Just tried:

html, body, #canvas { height: 100%; }

And seems to work for me. Give it a go and see if it works...

Hope it helps ;)

Improve this answer
1
  • Thanks for your help there. I am still having the same issue though? I still have the scroll bar appearing on the right, and I have to scroll down to the rest of the picture? I have tried doing what you said, but I must be doing something wrong still?
    – PrimalScientist
    Commented Jan 26, 2014 at 14:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.