Question

我知道这个特定的CSS技术有很多例子/帮助，但我觉得我的代码是100％正确的，但是，我不确定它为什么不起作用。

关键是，我试图让一个内部div由外部div包裹。我希望内部div在没有滚动条的情况下垂直滚动，并且我不希望内部div的内容在外部div之外向外流动。

此处显示在我的域名中：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{

}

Answer 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的滚动条，即。

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

1 个答案: