2016-11-18 7 views
0

고정 된 픽셀 크기의 페이지에 항상 동일한 퍼센트의 높이를 유지하고 싶습니다. 나는 이미 전체 사이트를 픽셀 단위로 만들었으므로 % 또는 다른 상대 단위를 사용할 수 없습니다.동일한 높이에서 뷰포트 유지

1500px 높이의 div가 있고 1366x768 화면에서 볼 때, 전체 1500px div는 완전히 가시적이어야합니다.

달성하려는 효과는 브라우저 확대/축소와 비슷합니다.

+0

뷰포트 단위를 사용해 보셨습니까? – TylerH

답변

0

div에서 min-height: 1500px;을 시도한 다음 overflow-y: auto을 본문 또는 html 요소에 넣을 수 있습니다.

창 높이에 따라 동적으로 크기를 조정하려면 CSS flexbox, vh 크기 조정 또는 자바 스크립트를 사용하여 창 크기 조정을 검색해야합니다.

0

viewport meta tag을 사용할 수 있습니다. "initial-scale = 1"부분 만 제거하면 화면은 항상 화면에 맞게 렌더링되어야합니다.

예를 들어 스마트 폰으로 페이지에 액세스하려고 할 때 문제가 발생할 수있는 페이지가 매우 작게 표시 될 수 있습니다. 다른 기기 및 화면에 맞게 페이지를 최적화하려면 responsive webdesign에 익숙해지는 것이 좋습니다.

높이와 같은 것 : 100vh; 객체의 높이를 뷰포트 높이의 100 %로 만듭니다. px에서 다른 것으로 전환 할 방법이없는 것처럼 보입니다.

+0

나는 그것을 시도하고 아무것도 바뀌지 않았다. 동일한 높이에서 뷰포트를 유지합니다. – KeBom

+0

아마도 도움이됩니다. https://i.stack.imgur.com/GRDK5.png 이것은 작은 화면에서 페이지가 어떻게 보이는지를 나타냅니다. – KeBom

+0

높이를 "device-height"로 설정해 보았습니까? – johnrackles