12

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?

3
  • 2
    it's all your fixed positioning that's causing the problem, that page does not know how long it is hence why you never get a scrollbar, try to change it to relative or absolute and see if that makes any difference
    – Reina
    Sep 25, 2012 at 2:00
  • @Reina: absolute is no better than fixed in this situation, since both take the elements out of the normal flow of the document.
    – daGUY
    Sep 25, 2012 at 2:53
  • thanks reina, i think you might be right. any idea how i can do this?
    – HansStam
    Sep 25, 2012 at 2:57

3 Answers 3

28

Try this:

html { overflow-y: scroll; }
body { position: absolute; }

Or this:

html { overflow-y: scroll; overflow-x:hidden; }
body { position: absolute; }
0
4

overflow-y: scroll; to both body and html

html,body{overflow-y: scroll; }
0

For me there was an:

overflow-y: hidden;

in the css of the first child of the body with was preventing the page from becoming scrollable. Once I removed it the page could scroll.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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