我有这个说明我正在努力，我有些阻止内部div从容器div中出来。现在我正在尝试添加一个滚动条，但有些东西阻止了我，我去了控制台日志，并尝试了我能做的一切......
这是我的HTML：
<!doctype html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="noteBack.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div class="container-box ">
<header><span>Note Details</span>
</header>
<div class="sub-header"><span>Friday 25.7.13 </span>
</div>
<div class="sub-container-box opacity-affect">
<div class="row">
<div class="col-xs-10 col-md-offset-0">
<div class="dialog-box">
<!--first white box inside the note-->
<div class="dialog-box-circle"></div> <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">Lea Poran -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>
</div>
</div>
</div>
<div class="dialog-box">
<!--second white box inside the note-->
<div class="dialog-box-circle"></div> <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">You -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex vitae mi venenatis odio felis convallis. Praesent ut consequat orci,</div>
</div>
<div class="dialog-box">
<!--third white box inside the note-->
<div class="dialog-box-circle"></div> <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">You -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">3d ago</span>
<div class="dialog-box-text">In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eget eros pretium, sagittis tortor at, tempor turpis.</div>
</div>
<div class="dialog-box-date">
<!--gray box - contains the date--> <span class="dialog-box-date-text">Friday, Apr..Year 2015 Calendar - Time and Date
</span>
</div>
<div class="dialog-box">
<!--replay of the first white box inside the note-->
<div class="dialog-box-circle"></div> <span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">Lea Poran -<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>
<div class="button-plus">+
<div></div>
</div>
</div>
</div>
</body>
</html>
这是我的css：
@import url(http://fonts.googleapis.com/css?family=Roboto:400, 100, 300, 500, 700, 900);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300, 700);
.container-box {
/*position:absolute;*/
width:382px;
height:529px;
background-color:lightgray;
overflow:hidden;
border:1px solid #cccccc;
margin:auto;
overflow-y:hidden;
}
/* .opacity-affect{ //After button click blur the background
opacity:0.5;
} */
header {
/*the red head line*/
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span {
/*text inside the red head line*/
display:inline-block;
padding-left:148px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header {
/*white sub head line*/
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:12px;
/*change*/
color:#454545;
font-family:'Roboto';
/*change*/
font-weight:700;
/*change*/
}
.sub-header span {
/*text inside the white sub head line*/
display:inline-block;
padding-top:11px;
padding-left:24px;
}
.dialog-box {
/*the white boxes inside the note main*/
position:relative;
width:365px;
background-color:white;
margin: 8px 0px 10px 8px;
/*change*/
border:1px solid #cccccc;
border-radius:5px;
/*change*/
box-shadow: 0px 2px 3px gray;
/*change*/
}
.dialog-box-circle {
display:inline-block;
float:left;
width:35px;
height:35px;
border-radius:30px;
background-color:#cccccc;
margin:15px 8px 14px 15px;
/*change*/
vertical-align:middle;
/*allow text to appear next to the circle div */
}
.dialog-box-name {
display:inline-block;
/*change*/
color:#3eb6d9;
/*change*/
font-size:13px;
margin-top:13px;
/*change*/
/* font-weight:bold; */
font-family:'roboto';
/*change*/
font-weight:500;
/*change*/
}
.dialog-box-text {
display:inline-block;
color:#8d8d8d;
/*change*/
font-size:13px;
/*change*/
font-family:'Roboto';
/*change*/
font-weight:400;
/*change*/
line-height:17px;
/*the space between the line*/
/*change*/
margin-left:15px;
margin-bottom:15px;
margin-top:0px;
/*change*/
margin-right:17px;
bottom:0;
left:0;
}
.dialog-box-name select {
border:0px;
font-size:13px;
/*change*/
font-family:'Roboto';
font-weight:500;
color:#454545;
cursor: pointer;
}
.dialog-box-day {
display:block;
font-size:11px;
/*change*/
font-family:'Roboto';
/*change*/
font-weight:700;
/*change*/
margin:4px 0px 0px 0px;
}
.dialog-vertical-menu {
float:right;
margin:8px;
}
.dialog-box-date {
/*the gray box inside the note main*/
position:relative;
width:365px;
height:37px;
margin: 0px 8px 10px 8px;
background-color:#cccccc;
}
.dialog-box-date-text {
display:inline-block;
font-family:'Roboto';
font-weight:500;
/*change*/
font-size:12px;
color:#000000;
margin-left:14px;
margin-top:10px;
}
.button-plus {
position:relative;
width:60px;
height:60px;
background-color:#f84a4a;
/* border:1px solid green; */
border-radius: 50%;
text-align:center;
float: right;
right:8px;
top:83%;
}
谢谢！
答案 0 :(得分：1)
使用此 修改您的答案
需要更改overflow：auto;
.container-box{
/*position:absolute;*/
width:382px;
height:529px;
background-color:lightgray;
.container-box{
/*position:absolute;*/
width:382px;
height:529px;
background-color:lightgray;
.container-box{
/*position:absolute;*/
width:382px;
height:529px;
background-color:lightgray;
overflow:auto;
border:1px solid #cccccc;
margin:auto;
overflow-y:hidden;
}
需要示例
请参阅预编码的此堆栈溢出的当前页面
答案 1 :(得分：0)
你的css中隐藏了2次溢出，所以...滚动将被隐藏
.container-box{
/*position:absolute;*/
width:382px;
height:529px;
background-color:lightgray;
overflow:hidden;
border:1px solid #cccccc;
margin:auto;
overflow-y:hidden;
}
试试这个
.container-box{
/*position:absolute;*/
width:382px;
height:529px;
background-color:lightgray;
overflow-x:auto;
border:1px solid #cccccc;
margin:auto;
overflow-y:hidden;
}