I'm trying to assign overflow:hidden to the wrapper but it is ignored. It works however, if I assign it to body. Does anyone have an idea how to make it work for the wrapper?
The HTML...
<head>
<meta charset="utf-8">
<title>Overflow Test</title>
</head>
<body>
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</body>
</html>
The CSS...
html {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}
#wrapper {
overflow: hidden;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}
Help would me much appreciated...
Thanks
Ok, I got it to work by putting my wrapper inside another div with position:absolute and top and bottom set to 0. I took inspiration from Body set to overflow-y:hidden but page is still scrollable in Chrome
Here's the new fiddle... https://jsfiddle.net/aaandreas/esLcw3md/2/ Thanks for your effort turbopipp, I appreciate it!
Here's the updated HTML...
<body>
<div id="prewrapper">
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</div>
And the updated CSS...
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#prewrapper {
position: absolute;
width: 100%;
overflow: hidden;
top: 0;
bottom: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}