화면에 상대적으로 높이가 고정 된

Question

페이지의 하단에 붙어있는 고정 위치 div를 만들려고합니다. 화면의 시작 높이가 70% (like vh)입니다. 크기를 재조정 할 수있는 jQuery로 크기를 조정할 것입니다.

height: 70vh 또는 height: 70%을 적용하면 사용자가 브라우저 높이의 크기를 조정할 때 div의 크기가 조절되고 동일한 값으로 유지하려고하는 것이 문제입니다. 어떻게해야할까요?

보기 전체 페이지에서 미리보기

div { 
 
    position: fixed; 
 
    display: block; 
 
    bottom: 0; 
 
    width: 500px; 
 
    height: 70vh; 
 
    background-color: red; 
 
}

<div> 
 
</div>

.

Answer 1

1. vh 또는 % 추천

는 viewport 또는 스크린 높이의 높이를 기준으로 할 것이다. 그래서 우리는 DOM로드시 javascript로 div의 초기 높이를 설정해야합니다.

2. 다음 (CSS 크기 변경)은 CSS resize 속성을 사용하여 수행 할 수 있습니다. ** PS : div 오른쪽 하단에서 크기 조정 아이콘을보고 크기를 조정할 수 있습니다.

document.getElementById("demo").style.height = window.innerHeight*.7+"px";

div { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 500px; 
 
    background-color: red; 
 
    resize:vertical; 
 
    overflow:auto; 
 
}

<div id="demo"></div>

Answer 2

div에 최소 높이를 추가하여 특정 높이 이상으로 크기가 조정되지 않도록 할 수 있습니다. 이

div { 
 
    position: fixed; 
 
    display: block; 
 
    bottom: 0; 
 
    width: 500px; 
 
    height: 70vh; 
 
    min-height: 500px; 
 
    background-color: red; 
 
}

<div> 
 
</div>