在容器 div 中滚动 div 不起作用答案

【问题标题】：scrolling div within a container div not working在容器 div 中滚动 div 不起作用
【发布时间】：2014-05-20 09:04:49
【问题描述】：

我知道有很多关于这种特定 CSS 技术的示例/帮助，但我觉得我的代码是 100% 正确的，但我仍然不确定它为什么不起作用。

关键是，我试图让一个内部 div 被一个外部 div 包裹。我希望内部 div 垂直滚动而不出现滚动条，并且我不希望内部 div 的内容向外流动到外部 div 之外。

这里是 jsfiddle。 http://jsfiddle.net/FE5X7/

它在我的域上运行：paxframe.com

HTML：

<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="index.css"  />
<link rel="stylesheet" type="text/css" href="reset.css"  />

<title>Bryan the Lion</title>
</head>

<body>
    <div id ="wrapper">
        <div id = "header">

        </div>
        <div id ="wrapper_main">
        <p>main wrapper</p>
            <div id = "main">
                <p>main div</p>

            </div>
        </div>
    </div>
</body>

</html>

CSS：

body{
height: 100%;
}
@font-face {
font-family: "AlexBrush";
src: url(fonts/AlexBrush-Regular.ttf) format("truetype");
}
#wrapper{
width: 80% ;
margin: 0 auto ;
background: yellow ;
height: 100% ;  

}
#wrapper_main{
background: red ;   
margin: 0 auto ;
width: 700px ;
height: 500px ;
border: solid 1px black ;
overflow: hidden;
}
#main{
background: blue ;
width: 700px ;
height: 1000px ;
overflow: scroll;

}
#header{
width: 90% ;
height: 10px ;
background: green ;
}
#header h1{
font-family: AlexBrush ;
font-size: 5em ;
}
#nav{
height: 50px ;
width: 80% ;
margin: 0 auto ;
display: block ;
background: gray ;
}   
#nav ul li{
display: inline-block;
letter-spacing: 2px ;
background: purple ;
}
#sidebar{

}

【问题讨论】：

该滚动 div 中的文本需要向下移动这么多才能开始滚动。通过添加一大堆文本或换行符，甚至图像来测试它。

标签： html css scroll overflow containers

【解决方案1】：

如果没有任何会溢出 div 的子元素，您将无法做到这一点。尝试在您的 div 中添加一些lipsum 文本，它会起作用。

您将溢出：滚动到错误的元素。

变化：

#wrapper_main{
    background: red ;   
    margin: 0 auto ;
    width: 700px ;
    height: 500px ;
    border: solid 1px black ;
    overflow: scroll;
}

#main{
    background: blue ;
    width: 700px;
    height: 1000px;
}

更新小提琴：

http://jsfiddle.net/FE5X7/2/

更新：

#wrapper_main::-webkit-scrollbar { 
    display: none; 
}

新小提琴：

http://jsfiddle.net/FE5X7/3/

注意：适用于 webkit 浏览器。您将需要 jquery 来隐藏 moz 和 ie 的滚动条。

【讨论】：

我想让滚动条消失
我知道还有另一种方法，将 div 包装在一个容器中，你知道我说的是哪种方法吗？
如果没有任何子元素会溢出你的 div，你就不能这样做。尝试在您的 div 中添加一些lipsum 文本，它会起作用。
是的，Canser，你是对的，把它作为答案，这样我就可以选择它并投票。
@BryanFajardo 刚刚编辑了我的答案兄弟。你可以接受。 :)