Reputation: 11

Html not scrolling

So my page will not scroll. I've had a poke around with some research and tried to get rid of position:fixed but that doesn't seem to have helped. Any suggestions?

Here is the CSS:

body {
height: 2000px
overflow: scroll;
}
#header {
z-index: 1;
position: relative;
width: 97.5%;
margin-top: 5px;
height: 60px;
background-color: #fffafa;
margin-bottom: 10px;
}

#footer {
clear: both;
position: relative;
width: 97.5%;
margin-top: 5px;
height: 30 px;
background-color: #ffc873;
margin-bottom: 5px;
}

.left {
position: relative;
margin-top: 70px;
height: 300px;
width: 20%;
background-color: #689ad3;
float: left;
}

.right {
height: 200px;
width: 20%;
margin-top: 70px;
height: 300px;
background-color: #689ad3;
float: right;
}

Thanks!

Upvotes: 1

Answers (4)

user3036344

Reputation: 11

So it turns out that the issue was not in the CSS after all. The problem was that my django code wasn't looking for the CSS in the right place - once I moved the code to the correct static location the overflow-y solution worked like a charm.

Upvotes: 0

Mr.G

Reputation: 3559

Try this css:

body {
height: 2000px;
overflow-y: scroll;
}
#header {
z-index: 1;
position: relative;
width: 97.5%;
margin-top: 5px;
height: 60px;
background-color: #fffafa;
margin-bottom: 10px;
}

#footer {
clear: both;
position: relative;
width: 97.5%;
margin-top: 5px;
height: 30 px;
background-color: #ffc873;
margin-bottom: 5px;
}

.left {
position: relative;
margin-top: 70px;
height: 300px;
width: 20%;
background-color: #689ad3;
float: left;
}

.right {
height: 200px;
width: 20%;
margin-top: 70px;
height: 300px;
background-color: #689ad3;
float: right;
}

Upvotes: 0