I have a single page site that is navigated via JS and works nearly as expected. Some of the pages are full screen (100% width and height of viewport with all content responsively fitting within this space). Some pages are text based pages that need to allow scrolling.
I need to use overflow-x:hidden on my main #wrapper as I slide various elements in from off screen and without the overflow-x:hidden it doesn't work on the Samsung Stock Browser (it works on all others just by using overflow-x:hidden on the body element but this doesn't work on Samsung Stock of course!)
You can a see a fiddle at http://jsfiddle.net/deshg/4nLoazzs/1/, if you remove the overflow-x:hidden from the #wrapper element then it all works as expected. However when you include the overflow-x:hidden on the #wrapper element (as it is now) then it causes the fixed #footer div to overlap the scrollbar. As you can see i've tried defining the #wrapper as 100% width with the #footer width set to inherit but this doesn't help either.
Can anyone explain how I can keep the same structure with overflow-x:hidden on the wrapper container but ensure the footer does not overlap the scrollbar as it's driving me nuts! Ideally I want to avoid using custom scrolls as everything else is perfect across all devices, this is the only remaining issue!
Thanks so much!
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer">FOOTER</div>
</div>
body,html {
height:100%;
width:100%;
margin:0;
padding:0;
}
p {
margin:0;
padding: 0 0 1em 0;
}
#wrapper {
height:100%;
overflow-x:hidden;
width:100%;
}
#header {
height:10%;
background-color: #ffcc00;
}
#content {
height:80%;
background-color: #cc00ff;
padding-bottom:15%;
}
#footer {
position:fixed;
bottom:0;
left:0;
height:10%;
background-color: #dd00ff;
width:inherit;
}
