본문 내용이 클 때 스크롤되는 수평 및 수직 중앙에 모달이 있습니다.
그러나 본문 내용이 모달 높이보다 작 으면 모달이 내용에 맞게 크기가 조정되지 않습니다.
나는 높이가 아닌 최대 높이 만 사용하려고했지만 모달 코드가 깨졌습니다 ...
참고 : 전체 페이지에서 코드를 실행하여 본문 내용 아래의 공백을 확인하십시오.
.cover {
background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
height: 100%;
left: 0;
padding: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 200;
}
.modal {
background-color: white;
margin: 10% auto;
max-width: 400px;
height: 60vh;
max-height: 60vh;
position: relative !important;
}
.scrollView {
position: relative;
border: 2px solid red;
height: calc(60vh - 100px);
margin: 50px 0;
top: 50px;
overflow: scroll;
z-index: 800;
}
div.header {
display: flex;
align-items: center;
height: 50px;
max-height: 50px;
top: 0;
position: absolute;
background: lightgreen;
width: 100%;
z-index: 900;
justify-content: space-between;
}
.header div {
padding: 0 20px;
}
div.footer {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
height: 50px;
background: orange;
width: 100%;
}
.body {
overflow-y: scroll;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
<div class="modal">
<div class="header">
<div>Header</div>
<div><a href="#">Close</a></div>
</div>
<div class="scrollView">
<div class="body">
Body short content
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</div>어떻게 해결할 수 있습니까?
아래와 같이 코드를 단순화하고 position : absolute 대신 모달 내부의 flexbox에 의존 할 수 있습니다.
.cover {
background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 200;
display:flex;
align-items:center;
justify-content:center;
}
.modal {
background-color: white;
max-width: 400px;
width:100%;
max-height: 60vh;
display:flex;
flex-direction:column;
}
.scrollView {
flex-grow:1;
border: 2px solid red;
overflow: auto;
}
div.header,
div.footer{
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
background: lightgreen;
padding: 0 20px;
flex-shrink:0;
}
div.footer {
background: orange;
justify-content: center;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
<div class="modal">
<div class="header">
<div>Header</div>
<div><a href="#">Close</a></div>
</div>
<div class="scrollView">
<div class="body">
Body <br>short <br>content
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다