CODEWITHSUNDEEP
htmlcssoverflow
Andreas
Andreas

Reputation: 21

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

Upvotes: 0

Views: 1135

Answers (2)

turbopipp
turbopipp

Reputation: 1255

Typo, change <div id="#wrapper"> to <div id="wrapper">

Update: I change the #content height to 100px, and created this fiddle to test if it works, and it seems it does. You must have removed much of your code in the example you provided, perhaps something else is causing the problem? Or is it the #content height 3000px that is the problem?

Update2: I think you want to activate/deactivate scrolling on body based on the status of your menu. I created this little fiddle with jQuery to show you how you can toggle a class on body. Just tie the listener to your menubutton instead of the whole wrapper element like I did, and watch the class .overflow getting added/removed to body. I hope this was the answer you where looking for?

Upvotes: 2

Andreas
Andreas

Reputation: 21

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 this thread http://goo.gl/U3OQQV

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

Upvotes: -1

Related Questions