각도 재질 대화 상자 - 고정 된 위치 요소 높이가 무작위로 끊어짐

Question

각도 재질 대화 상자 안에 높이를 지정하고 대화 상자의 영향을받지 않는 요소를 추가해야합니다 (사용자 지정 드롭 다운을 상상해보십시오). 이 작업을 수행 할 때마다 대화 상자의 맨 아래에 대화 상자가 나타나지 만 대화 상자의 맨 아래에는 직접 연결되지 않습니다. 그것은 바닥을 넘어 약 20px로가는 것을 허락 받았고, 그 다음 무작위로 끊어졌습니다. 여기

코드 펜 : http://codepen.io/kathk1/pen/woQWRZ

.rectangle { 
    background: red; 
    height: 900px; 
    width: 200px; 
    position: fixed; 
    z-index: 2000; 
} 

당신은 대화,이 경우 고정 요소 인 빨간색 사각형이 높이 900px해야한다고 시작하지만, 그것은 그 높이 득점되지 않습니다.

는이 작업을 수행하고있다 무엇 및/또는 내가 그것을 그만 얻을 어떻게? 나는 혼란 스럽다. 선명도

죄송 편집 : 나는 그것의 전체 900px 넘어 대화로 확장 빨간색 사각형을 원하는 . 대화 상자를 스크롤하지 않으려 고합니다.

Answer 1

흰색 정사각형 안에 빨간색 사각형을 만드시겠습니까?

그렇다면 position:fixed;을 position: relative;으로 변경하십시오. 흰색 사각형은 세로 스크롤을 얻습니다.

Answer 2

업데이트 시작 1 사용자의 편집을 기반으로

, md-dialog는 overflow 콘텐츠 숨 깁니다. 전체 사각형을 표시하려면이 동작을 재정의해야합니다. 기존 CSS를 사용하여이 사각형을 추가하십시오. 당신은 외부 div을 만들 수 1

---

md-dialog.md-default-theme 
{ 
    overflow: visible !important; 
} 

END 업데이트는 선택의 고정 높이로 설정하고 오버 플로우 스크롤 내부의 내용을 보자.

CSS

.wrapOne{  
    overflow-y: scroll; 
    height:30px; 
} 
.rectangle { 
    background: red; 
    height: 900px; 
    width:200px; 
} 

'<md-dialog aria-label="Sample Dialog">' + 
    '<md-content>'+ 
    '<div class="wrapOne"><div class="rectangle">TESTING------TESTING------TESTING------TESTING------TESTING------</div></div>'+ 
    ' <md-list>'+ 
    '  <md-item ng-repeat="item in ctrl.items">'+ 
    '  <p>{{item}}</p>' + 
    '  </md-item>'+ 
    ' </md-list>'+ 
    ' </md-content>' + 
    ' <div class="md-actions">' + 
    ' <md-button ng-click="ctrl.closeDialog()">' + 
    '  Close Greeting' + 
    ' </md-button>' + 
    ' ' + 
    '</md-dialog>',