브라우저 높이가 아닌 화면 높이별로 높이를 설정하는 방법

div 컨테이너의 높이를 설정하려면 어떻게해야합니까? 예를 들어 화면 높이의 60 % 여야합니다. 브라우저 창 크기를 조정하지 않으면 CSS에서 높이를 60 %로 설정하면 문제가 없습니다. 그러나 브라우저 창을 축소하면 그에 따라 div가 축소됩니다. https://zurb.com은 좋은 예입니다. "임무 완수", 회색 부분은 항상 브라우저 창의 크기가 조정되는 것과 상관없이 동일한 높이입니다. 어떻게 이것이 보장 될 수 있는가? HiDpi 지원을 보장하기 위해 px를 사용하고 싶지 않습니다.브라우저 높이가 아닌 화면 높이별로 높이를 설정하는 방법

감사합니다,

출처

2017-11-08 j.Doe

JS API를 사용하여 화면 높이를 얻은 다음 비율로 배수로 늘려야합니다. – jhpratt

페이지를 처음 렌더링 할 때 기본적으로 화면 높이를 저장하고 브라우저 크기의 변경에 관계없이 정확한 크기를 유지하고 싶습니까? 그래, JS가 필요할거야. –

해당 웹 사이트는 고정 된 높이이며 화면 높이와는 아무런 관련이 없습니다. – SLaks

해당 페이지는 단순히 같은 높이가 항상 것입니다 (그리고 높이의 60% 수 없음을 의미 문제의 요소에 대한 고정 높이 (px)를 사용하는 동안 뷰포트 높이에 관계없이). 요소를 뷰포트에 상대적으로 사용하려면 viewport-sized typography을 찾고 있습니다.

높이를 기준으로 조정하려면 CSS 단위 vh을 찾고, 해당 요소에 뷰포트 높이에 따라 크기를 조정하도록 지시합니다. vw을 사용하여 뷰포트 너비에 따라 비율을 조정할 수도 있습니다.

<body>이 margin: 8px의 기본을 가지고 있다는 사실을 양지해야합니다, 그래서 당신은 뷰포트 크기의 서체를 사용할 때 스크롤을 피하려면, 당신은 또한 0이 다시 재정의해야합니다. CSS 단위에 대한보다 자세한 정보는

body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    height: 60vh; 
 
    width: 100vw; 
 
    background: red; 
 
}

<div></div>

, 나는 this guide을 확인하는 것이 좋습니다 것입니다.

희망이 도움이됩니다. :)

출처

2017-11-08 21:36:45

답을 고맙습니다. 그러나 이것은 제가 의도 한 것이 아닙니다. 스 니펫을 전체 화면으로 실행하고 창 크기를 조정하면 빨간색 상자의 크기도 조정됩니다. –

뷰포트가 화면이 아닙니다. – CBroe

@ j.Doe : 예; 당신은 단지'px'에서 고정 높이를 원합니다. – SLaks

단순한 고정 높이 요소입니다. 화면 크기와 아무 관련이 없습니다.

px을 사용해야하며 아무 것도 걱정할 필요가 없습니다. px은 논리 픽셀을 의미하며 임의의 DPI에서 작동합니다.

출처

2017-11-08 21:42:23 SLaks

고맙습니다. px가 임의의 DPI로이 기능을 수행한다는 것을 몰랐습니다. –

브라우저 높이가 아닌 화면 높이별로 높이를 설정하는 방법

답변

관련 문제