Question

我正在尝试将overflow：hidden分配给包装器，但它会被忽略。但是，如果我将它分配给身体，它可以工作。有没有人知道如何让它适用于包装器？

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是问题吗？

Update2：我想你想根据菜单的状态激活/停用正文滚动。我创建了this little fiddle with jQuery来向您展示如何在身体上切换课程。只需将听众绑定到您的menubutton而不是像我一样将整个包装元素绑定，并观看将.overflow添加/删除到body。我希望这是你在寻找的答案吗？

Answer 2

好吧，我通过把我的包装器放在另一个div中的位置来完成它的工作：绝对，顶部和底部设置为0.我从这个线程中获取灵感http://goo.gl/U3OQQV

这里是新的小提琴...... 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;
}

溢出：隐藏的作品适用于身体但不适用于包装

2 个答案: