표 셀 표시 및 중앙 div에서 스크롤 활성화

질문

중앙 div에서 스크롤을 활성화하려면 어떻게해야합니까? 높이가 동적이므로 실제로 선언 할 수 없습니다.

코드는 다음과 같으며 콘텐츠가 필요하기에 충분하지 않으므로 스크롤 할 필요가없는 경우도 있습니다.

div는 세로 (높이가 뷰포트 높이보다 작을 때)와 가로 모두 가운데에 있어야합니다.

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
}
.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
  padding: 0 25px;
}
.modal-container {
  max-width: 600px;
  margin: auto auto;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
}

<div class="modal-mask">
  <div class="modal-wrapper">
    <div class="modal-container">
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>         
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
    </div>
  </div>

Expand snippet

내 다른 해결책은 다음과 같습니다.

.modal-mask {
  position: relative;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}
.modal-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right:0;
  left:0;
  margin: auto;
  padding: 0 25px;
}
.modal-container {
  max-width: 600px;
  margin: auto auto;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
}

<div class="modal-mask">
  <div class="modal-wrapper">
    <div class="modal-container">
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>         
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
     This needs scroll<br>
    </div>
  </div>

Expand snippet

이것의 문제는 높이가 뷰포트보다 낮을 때 container가 수직으로 중앙에 위치하지 않는다는 것입니다.

답변1

아래 코드를 추가하십시오. 그것이 당신을 도울 수 있기를 바랍니다

.modal-container {overflow-y: auto; max-height: 100vh;}

 

 

 

 

출처 : https://stackoverflow.com/questions/47606936/enable-scroll-in-table-cell-displayed-and-centered-div