반응형
화면 크기 늘리든 줄이든
1. 화면 크기 늘렸을 때 x표시 잘 보이면서
2. 화면 크기 줄였을 때 모달 한없이 안늘어나게 하는 법
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.modal-body {
max-height: calc(100% - 60.5px - 62.5px);
height: calc(100% - 60.5px - 62.5px);
overflow-y: auto;
.container {
width: calc(100% - 28px);
height: calc(100% - 28px);
.content-row {
height: calc(100% - 42px - 58px - 46px);
.col-sm-10 {
height: 100%;
}
}
}
}
.modal-content {
width: 80%;
height: 80%;
max-height: 950px;
}
.modal-header:before,
.modal-header:after {
display: none;
}
반응형
'HTML, CSS' 카테고리의 다른 글
[HTML, CSS] 내용 부분 스타일 지정만으로 푸터 하단 고정하는 방법 (0) | 2023.11.22 |
---|---|
[HTML, CSS] Input박스 안에 아이콘 넣기 (fontawesome) (0) | 2021.08.25 |
[CSS] border-box와 content-box (0) | 2021.06.22 |
[CSS] selectors & display (0) | 2021.05.31 |
[HTML, CSS 기초 쌓기] HTML 문서 유효성 검사 툴 소개 (0) | 2021.05.28 |