CODEWITHSUNDEEP
htmlcss
Shaun
Shaun

Reputation: 2181

Scrolling under div in Android browser

I have set up my page so that when scrolling, the content div scrolls under the header nav menu, which is about 48px high.

It's working fine it most browsers, the one notable exception is the Android stock browser, where scrolling won't happen at all.

My css:

#content{position:absolute; top:48px; left:0px; right:0px; bottom:0px; overflow-y:auto;}

nav {
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
margin: 0;
}

nav a {
height:48px;
display: block;
border: 0px solid red;
text-align: center;
margin: 0 1px;
padding:10px;
background: #444;
text-decoration:none;
color:#fff;
}

If I leave out the overflow-y, scrolling works again, but the whole page including the header scrolls.

Is this the right way to go about having a header div stay static on the page, and the content scroll under it, and if so, is there a way to get Android to behave?

Thanks for your time and help.

Upvotes: 1

Views: 98

Answers (1)

Brian
Brian

Reputation: 147

This might be an android issue... Older versions of Android require that you have only 1 scrolling pane.

Upvotes: 2

Related Questions