overflow:hidden 适用于 body 但不适用于包装器

Question

我正在尝试将 overflow:hidden 分配给包装器，但它被忽略了。但是，如果我将它分配给 body，它就可以工作。有谁知道如何让它适用于包装器吗？

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>

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

非常感谢帮助...

谢谢

Answer 1

打字错误，将 <div id="#wrapper"> 更改为 <div id="wrapper">

更新：我将#content 高度更改为 100px，并创建了 this fiddle 来测试它是否有效，看起来确实有效。您一定已经删除了您提供的示例中的大部分代码，也许是其他原因导致了问题？还是 #content height 3000px 才是问题所在？

更新 2：我认为您想 activate/deactivate 根据菜单的状态在正文上滚动。我创建 this little fiddle with jQuery 是为了向您展示如何在 body 上切换 class。只需将侦听器绑定到您的菜单按钮而不是像我那样绑定整个包装器元素，然后观察 class .overflow 从 added/removed 到 body。我希望这是您正在寻找的答案？

Answer 2

好的，我通过将我的包装器放入另一个 div 并将 position:absolute 和顶部和底部设置为 0 来实现它。我从这个线程 http://goo.gl/U3OQQV

这是新的fiddle...https://jsfiddle.net/aaandreas/esLcw3md/2/感谢您的努力 turbopipp，我很感激！

这是更新后的 HTML...

<body>

<div id="prewrapper">

<div id="wrapper">

    <header></header>

    <main>

        <div id="content"></div>

    </main>

</div>

</div>

更新后的 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;
}

overflow:hidden 适用于 body 但不适用于包装器

overflow:hidden works for body but not for wrapper

html

css

overflow