매우 이상한 문제가 있습니다 ... 모든 브라우저 및 모바일 버전 에서이 동작이 발생했습니다.

• 페이지 스크롤을 시작할 때 위로 이동하는 페이지를로드하면 (예 : 주소 표시 줄 표시) 모든 브라우저에 최상위 메뉴가 있습니다.
• 100vh는 때때로 뷰포트의 보이는 부분에서만 계산되므로 브라우저 막대가 100vh 위로 올라가면 픽셀 단위로 증가합니다
• 치수가 변경되었으므로 모든 레이아웃을 다시 페인트하고 다시 조정
• 사용자 경험에 좋지 않은 영향

이 문제를 어떻게 피할 수 있습니까? 내가 viewport-height에 대해 처음 들었을 때 나는 흥분했고 자바 스크립트를 사용하는 대신 고정 높이 블록에 사용할 수 있다고 생각했지만 실제로는 resize 이벤트가있는 실제로 javascript라고 생각합니다 ...

샘플 사이트 에서 문제점을 볼 수 있습니다.

누구든지 CSS 솔루션을 제안 / 제안 할 수 있습니까?

간단한 테스트 코드 :

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

불행히도 이것은 의도적 인 것입니다…

이것은 다른 문제를 방지하기 위해 의도적으로 알려진 잘 알려진 문제입니다 (적어도 사파리 모바일에서는). Benjamin Poulain이 웹킷 버그에 답했습니다 .

이것은 완전히 의도적 인 것입니다. 이 효과를 달성하기 위해서는 상당한 노력이 필요했습니다. :)

기본 문제는 이것입니다. 스크롤 할 때 보이는 영역이 동적으로 변경됩니다. CSS 뷰포트 높이를 적절히 업데이트하면 스크롤하는 동안 레이아웃을 업데이트해야합니다. 그것은 똥처럼 보일뿐만 아니라 60 FPS에서 그렇게하는 것은 대부분의 페이지에서 실제로 불가능합니다 (60 FPS는 iOS의 기본 프레임 속도입니다).

"똥 모양"부분을 보여주기는 어렵지만 스크롤 할 때 내용이 이동하고 화면에서 원하는 내용이 계속 바뀌고 있다고 상상해보십시오.

동적으로 높이를 업데이트하지 않으면 몇 가지 선택 사항이 있습니다 .iOS에서 뷰포트 단위를 삭제하고, iOS 8 이전과 같은 문서 크기를 일치시키고, 작은 뷰 크기를 사용하고, 큰 뷰 크기를 사용하십시오.

우리가 가진 데이터에서 더 큰 뷰 크기를 사용하는 것이 가장 타협했습니다. 뷰포트 단위를 사용하는 대부분의 웹 사이트는 대부분 멋지게 보였습니다.

Nicolas Hoizey는 이것을 꽤 연구했습니다 : https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

수정 계획 없음

이 시점에서 모바일 장치에서 뷰포트 높이를 사용하지 않는 것 외에는 할 수있는 일이 많지 않습니다. 2016 년에도 Chrome이 다음과 같이 변경되었습니다.

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing

min-height: -webkit-fill-available;대신 CSS를 사용해보십시오 100vh. 해결되어야한다

내 응용 프로그램에서 나는 그렇게합니다 (typescript 및 중첩 된 postcss, 따라서 코드를 적절하게 변경하십시오).

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

당신의 CSS에서 :

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

그것은 적어도 크롬 모바일과 아이 패드에서 작동합니다. 작동하지 않는 것은 iOS의 홈 화면에 앱을 추가하고 방향을 몇 번 변경하면 확대 / 축소 수준이 innerHeight 값과 엉망이되어 해결책을 찾으면 업데이트를 게시 할 수 있습니다.

데모

내가 구축 한 많은 사이트에 대해 클라이언트가 100vh 배너를 요청하고 찾은 것처럼 스크롤을 시작할 때 모바일에서 "점프"경험이 나빠집니다. 이것이 모든 장치에서 일관되고 일관된 경험을 위해 문제를 해결하는 방법입니다.

먼저 배너 요소 CSS를 height:100vh

그런 다음 jQuery를 사용하여 배너 요소의 높이를 픽셀 단위로 가져 오고이 높이를 사용하여 인라인 스타일을 적용합니다.

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

이렇게하면 페이지가로드 될 때 CSS를 사용하여 배너 요소가 100vh로 설정된 다음 모바일 요소의 문제가 해결됩니다 .jQuery는 배너 요소에 인라인 CSS를 배치하여 사용자가 스크롤하기 시작할 때 크기 조정을 중지하여이를 무시합니다.

그러나 데스크톱에서 사용자가 브라우저 창 크기를 조정하면 위의 jQuery로 인해 배너 요소의 높이가 고정되어 있기 때문에 배너 요소의 크기가 조정되지 않습니다. 이를 해결하기 위해 Mobile Detect 를 사용 하여 문서 본문에 'mobile'클래스를 추가합니다. 그런 다음 위의 jQuery를 if 문으로 묶습니다.

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

결과적으로 사용자가 모바일 장치에 있으면 클래스 'mobile'이 내 페이지 본문에 있으며 위의 jQuery가 실행됩니다. 따라서 내 배너 요소는 모바일 장치에 적용된 인라인 CSS 만 가져 오는 반면 데스크톱에서는 원래 100vh CSS 규칙이 그대로 유지됩니다.

이 답변을보십시오 : https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

React 구성 요소를 생각해 냈습니다. React 를 사용하거나 소스 코드를 탐색 하는지 확인하십시오. 그렇지 않은 경우 하여 환경에 맞게 조정할 수 있습니다.

전체 화면 div의 높이를 window.innerHeight 다음 창 크기 조정시 업데이트합니다.

며칠 동안 해결책을 찾고 있었으므로 VueJS를 Vuetify와 함께 사용하는 모든 사람들을위한 광산입니다 (내 솔루션은 v-app-bar, v-navigation-drawer 및 v-footer를 사용합니다) : App.scss를 만들었습니다 (App에서 사용). vue) 다음 내용이 포함됩니다.

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

나에게 그러한 트릭은 일을했다 :

height: calc(100vh - calc(100vh - 100%))

@nils가 명확하게 설명했습니다.

다음은 무엇입니까?

CSS에서 상대적인 '클래식' %(백분율) 을 사용하기 위해 돌아 왔습니다 .

종종 사용하는 것보다 무언가를 구현하는 것이 더 많은 노력 vh이지만, 적어도 UI 결함없이 다른 장치와 브라우저에서 작동하는 매우 안정적인 솔루션이 있습니다.

방금 내가 디자인 한 웹 응용 프로그램이 iPhone 및 iPad 에서이 문제가 있음을 발견했으며 특정 Apple 장치를 대상으로하는 미디어 쿼리를 사용하여 문제를 해결하는 기사를 찾았습니다.

나는 그 기사에서 코드를 공유 할 수 있는지 모르겠지만 주소는 다음과 같습니다 : http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

기사 인용 : "이전 버전의 iPhone 및 iPad 해상도를 대상으로하는 미디어 쿼리를 사용하여 요소 높이를 장치 높이와 일치시키기 만하면됩니다."

전체 높이 요소를 조정하기 위해 6 개의 미디어 쿼리 만 추가했으며 CSS가 완전히 구현되었으므로 작동해야합니다.

수정 보류 중 : 지금 테스트 할 수 없지만 돌아와서 결과를보고합니다.

내가 새로 왔을 때 다른 답변에 대해서는 언급 할 수 없습니다.

누군가이 작업을 수행 할 수있는 답변을 찾고 있다면 (현재 자바 스크립트를 사용할 수있는 것처럼 보일 수 있습니다)이 접근법은 나에게 매우 효과적이며 모바일 방향 변경도 설명합니다. 예제 코드에는 Jquery를 사용하지만 vanillaJS로 가능해야합니다.

먼저, 스크립트를 사용하여 장치가 터치 또는 호버링되었는지 감지합니다. 베어 본 예제 :

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

그러면 나중에 높이 스크립트에 사용할 수있는 장치 유형 (호버 또는 터치)에 따라 본문 요소에 클래스가 추가됩니다.

다음으로이 코드를 사용하여로드 및 방향 변경시 장치 높이를 설정하십시오.

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-시간 초과는 장치가 방향 변경시 새 높이를 정확하게 계산하도록 설정됩니다. 시간 초과가 없으면 내 경험상 높이가 정확하지 않습니다. 500ms는 지나친 것이지만 나를 위해 일했습니다.

브라우저가 CSS 100vh를 대체하는 경우 호버 디바이스의 -100vh가 대체입니다.

다음 코드는 문제를 해결했습니다 (jQuery 사용).

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

그리고 다른 요소들은 %대체 할 단위로 사용 됩니다 vh.

여기 내 React 앱에 사용 된 해결 방법이 있습니다.

iPhone 11 Pro 및 iPhone Pro Max-120px

아이폰 8-80px

max-height: calc(100vh - 120px);

타협이지만 비교적 간단한 수정입니다.

다음은 나를 위해 일했습니다.

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

는 body눈에 보이는 뷰포트의 높이를 취할 것와 #your-app-container함께는 height: 100%해당 컨테이너가 가시 뷰포트의 높이를 가지고 할 것입니다.

바라건대, 이것은 여기에 제안 된 UA 정의 CSS 환경 변수 일 것입니다 : https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

때문에 이 고정되지 않습니다, 당신은 뭔가를 할 수 있습니다 :

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

나를 위해 많은 장치와 브라우저에서 작동하지 않는 JavaScript를 사용하는 것보다 가장 빠르고 순수한 솔루션이었습니다.

vh귀하의 요구에 맞는 적절한 가치를 사용 하십시오.

주소 표시 줄 등을 포함하지 않는 장치의 전체 높이를 사용하는 디자인 선택으로 인해 모바일 장치에서 vh를 사용하면 100vh에서 작동하지 않습니다.

실제 뷰 높이에 비례하는 div 높이를 포함한 레이아웃을 찾고 있다면 다음과 같은 순수한 CSS 솔루션을 사용합니다.

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

뷰포트 높이를 설정하는 두 가지 옵션이 있습니다. --devHeight를 작동 가능한 높이로 수동 설정하십시오 (그러나 코딩하려는 각 유형의 장치에 대해이 값을 입력해야합니다)

또는

자바 스크립트를 사용하여 창 높이를 얻은 다음 뷰 포트로드 및 새로 고침에 대한 --devheight를 업데이트하십시오 (그러나 자바 스크립트를 사용해야하지만 순수한 CSS 솔루션은 아닙니다)

올바른 뷰 높이를 얻으면 높이를 할당하는 각 div에서 승수를 변경하여 총 뷰포트 높이의 정확한 비율로 여러 div를 만들 수 있습니다.

0.10 = 시야 높이의 10 % 0.57 = 시야 높이의 57 %

이것이 누군가를 도울 수 있기를 바랍니다.)

다음 스크립트와 스타일을 추가하면됩니다.

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }
  window.addEventListener('resize', appHeight);
  appHeight();

스타일

.module {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

html, body { height: 100% }모바일 장치에서 100vh의 영향을받는 것을 시도하십시오 .

position: fixed; top: 0; bottom: 0;컨테이너에 속성을 부여 할 수 있습니다 .