试图添加滚动条，somthing阻止我，我不确定是什么，在CSS中相关的部分是Note-Detailes .. 即时添加两个html＆＃39; s是索引，另一个是实际页面..
index html：
<!doctype html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<script src="scripts/main.js"></script>
<script src="scripts/mainJQ.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" layout="column" layout-margin="" class="dialogdemoBasicUsage" ng-app="MyApp">
<p class="inset">
Open a dialog over the app's content. Press escape or click outside to close the dialog and
send focus back to the triggering button.
</p>
<div layout="column" layout-align="center" class="dialog-demo-content">
<div>
<md-button class="md-primary label" ng-click="showNotes($event)">
Notes
</md-button>
</div>
<div>
<md-button class="md-primary" ng-click="showNoteDetails($event)">
Notes details
</md-button>
</div>
</div>
<br>
<b layout="row" layout-align="center center" layout-margin="">
{{alert}}
</b>
</div>
</body>
</html>
注意html：
<md-dialog class="container-box" aria-label="Mango (Fruit)">
<form >
<header><span>Note Details</span></header>
<md-subheader class="md-sticky-no-effect sub-header"><span>Friday 25.7.13 </span></md-subheader>
<md-dialog-content class="sticky-container">
<div class="dialog-box" ><!--first white box inside the note-->
<div class="dialog-box-circle" id="box1"></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 class="dialog-box" > <!--second white box inside the note-->
<div class="dialog-box-circle" id="box2"></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 </div>
</div>
<div class="dialog-box" > <!--third white box inside the note-->
<div class="dialog-box-circle" id="box2"></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 </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" id="box1"></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 class="dialog-box" ><!--replay of the first white box inside the note-->
<div class="dialog-box-circle" id="box1"></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 class="dialog-box" ><!--replay of the first white box inside the note-->
<div class="dialog-box-circle" id="box1"></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>
</md-dialog-content>
<md-button class=" md-warn md-fab md-button md-blue-theme move-right-bottom" aria-label="Use Android">
<md-icon md-svg-src="img/icons/android.svg"></md-icon>
</md-button>
<!-- <nav mfb-menu position="" effect=""
label="your main button text here"
active-icon="ion-edit" resting-icon="ion-plus-round">
<a mfb-button icon="icon-class" label="child button text">
</a>
</nav>-->
<!--<nav mfb-menu position="br" effect="zoomin" label="hover here"
active-icon="ion-edit" resting-icon="ion-plus-round"
toggling-method="click">
<button mfb-button icon="paper-airplane" label="menu item"></button>
</nav>-->
<!--<button tabindex="0" aria-label="Add" ng-click="addEvent()" class="md-fab md-fab-bottom-right md-button md-blue-theme" ng-transclude=""> <ng-md-icon icon="add"></ng-md-icon> <md-icon aria-hidden="true" class="ng-scope ng-isolate-scope md-blue-theme" md-svg-src="images/icons/ic_add_24px.svg" style="width: 24px; height: 24px"><svg style="pointer-events: none; display: block;" viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" fit="" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></md-icon> <div style="" class="md-ripple-container"></div></button>-->
<!--<ul mfb-menu="" position="br" effect="zoomin" active-icon="ion-close-round" resting-icon="ion-plus-round" ng-mouseenter="hovered()" ng-mouseleave="hovered()" toggling-method="click" menu-state="ctrl.menuState" main-action="ctrl.mainAction()" class="mfb-component--br mfb-zoomin" data-mfb-toggle="click" data-mfb-state="closed"> <li class="mfb-component__wrap"> <a ng-click="clicked()" ng-mouseenter="hovered()" ng-mouseleave="hovered()" ng-attr-data-mfb-label="{{label}}" class="mfb-component__button--main"> <i class="mfb-component__main-icon--resting ion-plus-round"></i> <i class="mfb-component__main-icon--active ion-close-round"></i> </a> <ul class="mfb-component__list" ng-transclude="">
ngRepeat: button in ctrl.buttons <li class="ng-isolate-scope" mfb-button="" icon="ion-social-github" ng-click="ctrl.loc(button.href)" label="View on Github" ng-repeat="button in ctrl.buttons"> <a data-mfb-label="View on Github" class="mfb-component__button--child"> <i class="mfb-component__child-icon ion-social-github"> </i> </a></li> end ngRepeat: button in ctrl.buttons <li class="ng-isolate-scope" mfb-button="" icon="ion-social-octocat" ng-click="ctrl.loc(button.href)" label="Follow me on Github" ng-repeat="button in ctrl.buttons"> <a data-mfb-label="Follow me on Github" class="mfb-component__button--child"> <i class="mfb-component__child-icon ion-social-octocat"> </i> </a></li> end ngRepeat: button in ctrl.buttons <li class="ng-isolate-scope" mfb-button="" icon="ion-social-twitter" ng-click="ctrl.loc(button.href)" label="Share on Twitter" ng-repeat="button in ctrl.buttons"> <a data-mfb-label="Share on Twitter" class="mfb-component__button--child"> <i class="mfb-component__child-icon ion-social-twitter"> </i> </a></li> end ngRepeat: button in ctrl.buttons
</ul></li></ul>-->
<!-- <div class="md-actions" layout="row">
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" hide show-md>
More on Wikipedia
</md-button>
<span flex></span>-->
<!-- <md-button ng-click="answer('not useful')" class="md-primary">
Not Useful
</md-button>
<md-button ng-click="answer('useful')" class="md-primary">
Useful
</md-button>-->
</div>
</form>
</md-dialog>
这是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);
.dialogdemoBasicUsage .dialogDemo1 {
height: 500px; }
.dialogdemoBasicUsage .dialog-demo-content div {
text-align: center; }
.dialogdemoBasicUsage .md-subheader {
background-color: #dcedc8;
margin: 0;
}
/*note*/
form{
position: relative;
display: inline-block;////
}
.container-box-note{
width:382px;
height:529px;
overflow:hidden;
border:1px solid #cccccc;
margin:0 auto;
background-image: url('http://i.stack.imgur.com/ynxjD.png');
background-position: center bottom;
background-repeat: repeat-y;
/* overflow-y :auto;*/
}
header{ /*the red head line*/
z-index: 2;
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
.container-box-note header span{
z-index: 2;/*text inside the red head line*/
display: block;
padding-left: 45%;
padding-top:14px;
padding-bottom:14px;
font-family: 'roboto';
font-weight: 700;
font-size: 17px;
}
.sub-header-note{ /*white sub head line*/
z-index: 1;
padding-left: 0px;
width:100%;
height:37px;
background-color:white;
font-size:12px;
color:#454545;
font-family:'roboto';
font-weight:700;
border-bottom: 1px solid #cccccc;
box-shadow: 0px 2px 1px lightgray;
margin-left: 0px;
/* padding: 0px; */
}
.sub-header-note span{ /*text inside the white sub head line*/
z-index: 1;
display:inline;
padding-top:14px;
/* padding-left:10px; */
}
.text-box-note{
padding-top: 4px;
}
.dialog-box-name-note{ /*text on the main */
/*line-height:48px;*/
/* display:block; */
margin: 0px 0px 0px 15px;
/* font-weight:bold; */
/* display: inline; */
color:#3eb6d9;
font-size:13px;
/* font-weight:bold; */
font-family:'roboto';
font-weight:500;
}
.dialog-box-name-note select {
border:0px;
font-size:13px;
font-family:'roboto';
font-weight:500;
color:#454545;
background-color:transparent;
cursor: pointer;
/* overflow-y: auto;*/
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
textarea{
dispaly: block;
width: 95.2%;
height: 417px;
background-color: transparent;
border: 0px;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
line-height: 25px;
font-family: 'roboto';
font-weight: 700;
margin-left: 14px;
margin-right:14px;
text-transform: capitalize;
}
.move-right-bottom{
position:absolute;
bottom:0px;
right:4px;
}
/*Note Details*/
.sticky-container{
padding: 0px 0px 0px 0px;
overflow-y: hidden;
overflow:auto;
}
.container-box{
/*position:absolute;*/
width:382px;
background-color: #e6e6e6 !important;
border:1px solid #cccccc;
margin: 0 auto;
}
/*.opacity-affect{ //cover blur affect
opacity:0.5;
} */
header{ /* red head line*/
display: block;
position: relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:0px;
}
header span{ /*text inside the red head line*/
display:inline-block;
padding-left:149px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{ /*white sub head line*/
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:12px;
color:#454545;
font-family: 'Roboto';
font-weight:700;
border-bottom: 1px solid #cccccc;
box-shadow: 0px 2px 1px lightgray;
}
.sub-header span{ /*text inside the white sub head line*/
display:inline; //
padding-top:14px;
padding-left: 10px;
}
.dialog-box{ /* white boxes inside the noteDetails main*/
position:relative;
width:365px;
background-color:white;
margin-top: 8px !important;
margin-left:8px ;
margin-bottom: 0px;
margin-right:8px ;
border: 1px solid #cccccc;
border-radius:1px;
box-shadow: 0px 2px 1px lightgray;
}
.dialog-box-circle{
display:inline-block;
float:left;
width:35px;
height:35px;
border-radius:30px;
background-color:#cccccc;
margin:15px 8px 14px 15px;
vertical-align:middle;/*allow text to appear next to the circle div */
}
.dialog-box-name{
display:inline-block;
color:#3eb6d9;
font-size:13px;
margin-top:13px;
/* font-weight:bold; */
font-family:'roboto';
font-weight:500;
}
.dialog-box-text{
display:inline-block;
color:#8d8d8d;
font-size:13px;
font-family: 'Roboto';
font-weight:400;
line-height:17px; /*the space between the line*/
margin-left:15px;
margin-bottom:8px;
margin-top:0px;
margin-right:17px;
bottom:0;
left:0;
}
#box1 {
background-image: url('https://randomuser.me/api/portraits/thumb/women/54.jpg'); /*profile picture*/
background-position: center center;
background-size: 100% auto;
}
#box2 {
background-image: url('https://randomuser.me/api/portraits/thumb/men/96.jpg'); /*profile picture*/
background-position: center center;
background-size: 100% auto;
}
.dialog-box-name select {
border:0px;
font-size:13px;
font-family:'Roboto';
color:#454545;
cursor: pointer;
cursor: pointer;
/* overflow: auto;*/
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.dialog-box-day{
display:block;
font-size:11px;
font-family: 'Roboto';
font-weight:700;
margin:4px 0px 0px 0px;
}
.dialog-vertical-menu{
float:right;
margin:8px;
}
.dialog-box-date{ /*the gray separator box inside the note main*/
position:relative;
width:365px;
height:37px;
margin: 8px 0px 10px 8px;
background-color:#cccccc;
}
.dialog-box-date-text {
display:inline-block;
font-family: 'Roboto';
font-weight:500;
font-size:12px;
color:#000000;
margin-left:14px;
margin-top:10px;
}
答案 0 :(得分：0)
尝试使用md-dialog-content div或overflow-y +固定auto来覆盖overlay个height个内容：
<md-dialog-content class="sticky-container">
<div style="overflow-y: overlay;
height: 478px;
max-height: 478px;
min-height: 478px;">
...
</div>
</md-dialog-content>
** md-dialog-content的身高auto
干杯，