Html 正在尝试添加滚动条_Html_Css

Html 正在尝试添加滚动条

html css

Html 正在尝试添加滚动条,html,css,Html,Css,试图添加滚动条，有东西挡住了我，我不确定是什么，css中的相关部分是注释细节。。我添加了两个html，一个是索引，另一个是实际页面索引html: <!doctype html> <html ng-app="MyApp"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-materia

试图添加滚动条，有东西挡住了我，我不确定是什么，css中的相关部分是注释细节。。我添加了两个html，一个是索引，另一个是实际页面

索引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>

尝试使用

overflow-y

auto

或

overlay

+fixed

高度将md对话框内容用一些div
进行包装：
<md-dialog-content class="sticky-container">
   <div style="overflow-y: overlay;
     height: 478px;
     max-height: 478px;
     min-height: 478px;">

    ...

  </div>
</md-dialog-content>


...


**md对话框内容
具有高度auto

干杯，如果您想要一个垂直滚动条，那么我想提醒您overflow-y是隐藏的
@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;

}

<md-dialog-content class="sticky-container">
   <div style="overflow-y: overlay;
     height: 478px;
     max-height: 478px;
     min-height: 478px;">

    ...

  </div>
</md-dialog-content>