대화 상자 창을 자동으로 고정 설정합니다.

Question

그래서 대화 상자가 나타나서 창 아래에 컨테이너를 밀어 넣는 임의의 양의 데이터가 있습니다. 기본 페이지에는 임의의 양의 정보가 들어 있습니다. 이 문제를 해결하려면 대화 상자를 수정하고 창의 높이를 80 %로 설정하십시오. 문제는 데이터가 80 %보다 작 으면 마지막 데이터 행과 대화 상자 하단 사이에 빈 공간이 있다는 것입니다. 내 질문은, 자동으로 대화 상자 높이를 설정하는 방법입니다,하지만 데이터가 아래쪽 창의 20 % 이내로 컨테이너를 못살게 굴지 않으면 고정되어 있어야하므로 항상 창 하단과 20 % 차이가 있습니다 대화 상자 아래쪽 (사용자가 대화 상자에서 스크롤하여 나머지 데이터를 볼 수 있음).

<div class="ui-dialog"> 
    <div class="ui-content"> 
     data 
    </div> 
</div> 

.ui-dialog { width: 800px; height: 80%; position: fixed; display: block; left: 10%;} 
.ui-content { overflow: auto; } 

if($((('.ui-dialog').height()) > ((window).height('80%')))){ 
    alert('test'); 
}; 

Answer 1

최소 높이/최대 높이로 작업 할 수 있습니다.

.ui-dialog { 
 
    width: 80%; 
 
    min-height: 20%; 
 
    max-height: 80%; 
 
    position: fixed; 
 
    display: block; 
 
    left: 10%; 
 
overflow: auto; 
 
} 
 
.ui-content { 
 
    
 
    background-color:red; 
 
}

<div class="ui-dialog"> 
 
    <div class="ui-content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac justo enim. Suspendisse vitae nisi mollis, efficitur sapien et, dignissim urna. In at ex dignissim, lacinia nibh ut, elementum sem. Etiam ultrices urna diam. Phasellus volutpat auctor dolor lobortis tempus. Aliquam facilisis laoreet lorem, eget commodo neque consequat id. Donec auctor justo non nisi posuere suscipit. Morbi imperdiet mi est, nec molestie nunc maximus id. Maecenas a nulla ac massa pharetra facilisis. Integer egestas mauris justo, sit amet interdum odio auctor vitae. 
 

 
Phasellus eu tortor ac ex pulvinar semper. Nullam tristique nibh quis dolor mattis, sed rutrum lectus euismod. Sed mollis eget ante nec luctus. Nunc porttitor eget turpis id auctor. Phasellus vestibulum, purus quis facilisis euismod, velit lectus congue massa, vitae auctor augue magna sit amet lacus. Donec non fringilla quam. Aenean quis sagittis risus. Donec tincidunt magna nec quam volutpat, eget auctor sem convallis. Aliquam tincidunt elit ut felis sagittis placerat. Maecenas ac massa faucibus, maximus dolor ac, iaculis arcu. Mauris lorem felis, mollis id consequat sit amet, ullamcorper eu nibh. Aenean id libero placerat, consectetur magna et, auctor tortor. Quisque ac scelerisque augue. Proin neque leo, aliquam et dui in, feugiat lacinia leo. Sed sed dolor ornare, lobortis nibh a, lacinia dolor. 
 

 
Phasellus et ante purus. Proin elementum imperdiet purus ut commodo. Nulla dictum efficitur ex, ac fermentum est suscipit id. Proin bibendum massa enim, egestas bibendum felis tempus in. Nulla facilisi. Vestibulum sollicitudin lorem eget scelerisque iaculis. Duis vel velit non enim malesuada accumsan. Morbi ut egestas lectus. Integer venenatis molestie mauris, vel convallis mi tempus et. 
 

 
Praesent a interdum arcu. Nunc ornare diam nulla, nec semper justo ullamcorper a. Etiam tincidunt ornare lectus a imperdiet. Proin tempor molestie neque sit amet viverra. Sed magna enim, finibus a tempor quis, imperdiet vel dui. Aenean mi mi, viverra in eros vel, eleifend tristique arcu. Proin orci quam, aliquam sed egestas ac, rhoncus at justo. Ut vel erat odio. 
 

 
Sed ultrices ut sem vehicula fermentum. Donec non enim nisi. In porta ac erat pellentesque dictum. Integer vel scelerisque enim. Maecenas pellentesque lorem eget eros egestas tristique. Phasellus eu feugiat ex, in dictum neque. Donec venenatis velit libero, in accumsan nibh lacinia a. Sed tempor, odio vitae mattis imperdiet, elit elit feugiat massa, quis maximus nisi risus eget mauris. 
 
     
 
    </div> 
 
</div>