在不工作的容器div中滚动div
在不工作的容器div中滚动div
提问于 2014-05-20 09:04:49
我知道有很多关于这种特定CSS技术的例子/帮助，但是我觉得我的代码是100%正确的，但是，我还是不知道为什么它不能工作。
重点是，我试图用外部div包裹一个内部div。我希望内部div垂直滚动而不出现滚动条，并且不希望内部div的内容向外部div外流动。
这是小提琴。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{
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-20 09:17:03
您不能使用任何会使div溢出的子元素来执行此操作。尝试添加一些唇和文本到您的div，它将工作。
您正在给溢出:滚动到错误的元素。
更改：
#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的滚动条。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23755391
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号