htmlcssoverflow

overflow:hidden works for body but not for wrapper


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


Solution

  • 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;
    }