So I have made a few pages that use the following css code:
html { overflow-y: scroll; } ul.navbar { list-style-type: none; position: fixed; top: 00px; left: 00px; width: 200px; height: 700px; background-image:url('/images/B_left-background.png');}ul.header { position: fixed; top: -20px; left: 240px; height: 100px; width:700px; background-image:url('/images/B_left-top.png');}body { position: fixed; top: 100px; left: 300px; font-family: Georgia, "Times New Roman", Times, serif; background-color: #D6E9B4;}div.scrollableContainer { background: none repeat scroll 0 0 ; border: 1px solid #999999; height: 400px; margin: 40px; overflow: auto; width: 800px;}h1 {font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }ul.navbar a {text-decoration: none }a.send{ color: black; background-image:url('/images/send-message-bt.png'); position:fixed; top:200px; left:0px; height:80px; width:290px;}a.token{ color: black; background-image:url('/images/token-ID-bt.png'); position:fixed; top:300px; left:0px; height:80px; width:290px;}a.history{ color: black; background-image:url('/images/history-bt.png'); position:fixed; top:400px; left:0px; height:80px; width:290px;}a.comp{ background-image:url('/images/competition-bt.png'); position:fixed; top:500px; left:0px; height:80px; width:290px;}a.out{ background-image:url('/images/B_log-out-bt.png'); position:fixed; top:600px; left:50px; height:60px; width:160px;}I would like to make the whole page scrollable, so that if someone on a low-resolution device can still scroll down. As you can see I put in the: html { overflow-y: scroll; }But this does not help.
Is there any way I can fix this? Does it have something to do with me setting the fixed-heights?