Why is my page not scrollable?

Question

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?

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 '12 at 02: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 '12 at 02:53
thanks reina, i think you might be right. any idea how i can do this? — HansStam, Sep 25 '12 at 02:57

score 28 · Answer 1 · answered Sep 25 '12 at 02:06

28

Try this:

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

Or this:

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

answered Sep 25 '12 at 02:06

Timo Kähkönen

11,962
9
71
112

Darkcoder · Answer 2 · 2017-05-02T09:02:03.890

4

overflow-y: scroll; to both body and html

html,body{overflow-y: scroll; }

edited May 02 '17 at 09:02

answered May 02 '17 at 08:44

Darkcoder

802
1
9
17

score 0 · Answer 3 · answered Feb 18 '21 at 12:49

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.

answered Feb 18 '21 at 12:49

Travel and code enthousiast

451
7
18

Why is my page not scrollable?

3 Answers3

Linked