100VH超过移动浏览器的高度，因此内容滚动和/或被切断

Question

我有一个在视口中包含的布局。内容高度不应超过视口的高度。

这在Chrome/Safari/Firefox的桌面上正常工作。但是我在iOS Chrome/Safari上遇到问题（我也想是Android），其中内容显示的内容比视口更高，并且需要滚动。我认为这是由于地址栏。

这发生在两个元素上：

• 具有100VH卷轴的主要内容区域。
• 页面左侧的固定 bar根本不应滚动。徽标出现在页面顶部 - 因此我认为它超过了浏览器的高度。实际上，当它旋转90度时，它具有100VH在width上设置的。

我已经阅读了一些较旧的文章，但似乎没有任何作用。代码已添加到帖子中，但我还创建了一个编码器，因此在移动设备上更容易查看： https：/https：// /codepen.io/moy/pen/popxxxe

/* #GLOBAL */

html,
body {
  margin: 0;
  padding: 0;
}

h1,
p {
  margin: 0 0 24px;
  padding: 0;
}

/* #HEAD (left column) */

.page-head {
  border-bottom: 2px solid black;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  position: fixed;
  bottom: -64px;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: top left;
  width: 100vh;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  order: 1;
  stroke: black;
  transform: rotate(90deg);
  width: 32px;

  svg {
    overflow: visible;
  }
}

.contrast {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  margin-bottom: 0;
  justify-content: flex-start;
}

/* #GRID */

.grid {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.grid__item {
  box-sizing: border-box;
  padding: 24px 24px 0;
  margin-left: 64px;
}

.gallery {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 0 24px 24px;
  text-align: center;
}

.gallery img {
  border: 2px solid black;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  max-width: 100%;
}

/**
 * Side-by-side view for wider devices.
 */

@media only screen and (min-width: 1000px) {
  .grid {
    background-color: black;
    flex-direction: row;
    column-gap: 2px;
    height: 100vh;
    margin: 0 64px;
  }

  .grid__item {
    background-color: white;
    width: 50%;
    height: 100vh;
    margin-left: auto;
  }

  .gallery {
    padding-top: 24px;
  }

  .gallery img {
    height: auto;
    max-height: 100%;
    object-fit: initial;
    width: auto;
    max-width: 100%;
  }
}

/* #FOOT (right column) */

.page-foot {
    margin-left: 64px;
    padding: 0 24px;
}

.swiper-pagination {
    display: none;
}

@media only screen and (min-width: 1000px) {

    .page-foot {
        border-bottom: 2px solid black;
        box-sizing: border-box;
        display: flex;
        height: 64px;
        padding: 0 24px;
        position: fixed;
        bottom: -64px;
        left: 0;
        transform: rotate(-90deg);
        transform-origin: top left;
        width: 100vh;
        left: auto;
        right: 0;
        transform: rotate(90deg);
        transform-origin: top right;
    
        p {
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }
    }
    
    .swiper-caption {
        flex: 1 1 0%;
    }
}

<div class="page-head" role="banner">
  <div class="site-logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="32" width="32">
      <defs>
        <clipPath id="a">
          <circle cx="32" cy="32" r="31" fill="none" />
        </clipPath>
      </defs>
      <circle cx="32" cy="32" r="31" fill="none" stroke-miterlimit="10" stroke-width="2" vector-effect="non-scaling-stroke" />
      <g clip-path="url(#a)" fill="none" stroke-miterlimit="10" stroke-width="2">
        <path d="M16.19 58.57V5.43L31.94 32 47.69 5.43v53.14M31.94 32v31.49" vector-effect="non-scaling-stroke" />
      </g>
    </svg>
  </div>
  <p class="contrast"><a href="#" class="contrast__link"><span class="contrast__switch"></span><span class="contrast__label">Contrast</span></a></p>
</div>

<div class="grid" role="main">

  <div class="grid__item">

    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

  <div class="grid__item gallery">
    <img src="https://www.fillmurray.com/700/1000" />
  </div>

  <div class="page-foot" role="contentinfo">
    <p class="swiper-caption">Caption Goes Here</p>
  </div>

</div>

Answer 1

也许使用JavaScript可能会有所帮助吗？
element.Style.height = window.offsetheight
我没有尝试过，所以我不太确定。