모달 대화 상자의 최대 높이가 설정되지 않은 이유는 무엇입니까?
여기서 내가 뭘 잘못하고 있는지 알려주세요.
참고 : 전체 모달 대화 상자가 스크롤되는 것을 원하지 않습니다. 모달 바디입니다. 모달 대화 상자의 최대 높이는 90vh 여야합니다. 그 후에는 높이가 확장되지 않아야합니다.
.modal{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
background: gray;
}
.modal-dialog{
position: relative;
z-index: 1000;
width: 500px;
max-width: 100%;
max-height: 90vh;
}
.modal-header{
background: cyan;
padding: 24px 24px;
}
.modal-footer{
background: cyan;
display: flex;
justify-content: flex-end;
padding: 24px 24px;
}
.modal-body{
background: red;
overflow-y: auto;
padding: 0 24px;
}<div class="modal">
<div class="modal-dialog">
<div class="modal-header">Header</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
</div>
<div class="modal-footer">
<button type="button">Hello</button>
</div>
</div>
</div>오버플로가 제대로 작동하려면 높이를 설정해야합니다. 이는 부모가 아닌 스크롤 가능하게 만들 요소에 높이를 설정하는 것을 의미합니다.
따라서이를 위해 a max-height를 .modal-body. 내 스 니펫에서 나는 100vh에서 모달 바디 높이의 일부가 아닌 모든 높이와 수직 여백 / 패딩을 제거하기 위해 calc를 사용하고 있습니다.
.modal {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
background: gainsboro;
}
.modal-dialog {
position: relative;
width: auto;
max-width: 500px;
margin: 16px;
}
.modal-header {
background: cyan;
padding: 16px;
max-height: 50px;
}
.modal-footer {
background: cyan;
display: flex;
justify-content: flex-end;
padding: 16px;
max-height: 50px;
}
.modal-body {
background: pink;
overflow-y: auto;
padding: 16px;
overflow-y: auto;
max-height: calc(100vh - 164px);
}<div class="modal">
<div class="modal-dialog">
<div class="modal-header">Header</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
</div>
<div class="modal-footer">
<button type="button">Hello</button>
</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다