我正在尝试将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;
}
帮助我非常感谢...
由于
答案 0 :(得分:2)
错字,将<div id="#wrapper">
更改为<div id="wrapper">
更新:我将#content高度更改为100px,并创建this fiddle以测试它是否有效,而且似乎确实如此。您必须在您提供的示例中删除了大部分代码,或许是其他原因造成了问题?或者#content height 3000px是问题吗?
Update2:我想你想根据菜单的状态激活/停用正文滚动。我创建了this little fiddle with jQuery来向您展示如何在身体上切换课程。只需将听众绑定到您的menubutton而不是像我一样将整个包装元素绑定,并观看将.overflow
添加/删除到body
。我希望这是你在寻找的答案吗?
答案 1 :(得分:-1)
好吧,我通过把我的包装器放在另一个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;
}