Question

我几次遇到这个问题，想知道是否有解决此问题的方法。我的问题发生在Chrome移动应用上。在那里，您可以向下滚动一点，地址栏消失。到目前为止，很好，让我们举一个例子：
容器height设置为100vh。

如您所见，底部被切除。

当我向下滚动时，它看起来像这样：

现在看起来不错。因此，很明显，Chrome将地址栏的高度计算为视口高度。所以我的问题是：

有没有一种方法，无论有没有地址栏，它看起来都一样？这样容器会膨胀吗？

Answer 1

尝试使用min-height: -webkit-fill-available。您也可以将其添加到height: 100vh下作为后备广告。

Answer 2

根据此official article on Chrome web，设置高度以填充可见视口的正确方法是在height: 100%元素或<html>元素上使用position: fixed 。如文档所述，这确保了与移动Safari的兼容性，并且与URL栏的大小无关。

Answer 3

我遇到了类似的问题，并在ReactJS中使用了该解决方案：

import { useLayoutEffect, useState } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

此useWindowSize函数取自Rerender view on browser resize with React。

当我在代码中使用它时，它看起来像这样：

const MessageList = () => {
  const { messages } = useContext(ChatContext);
  const [, windowHeight] = useWindowSize();
  return (
    <div
      className="messages"
      style={{
        height: windowHeight - 80 - 48, // window - message form - navbar
      }}
    >
      {messages.map((m, i, list) => ( <Message ... /> )}
    </div>
  );
};

Answer 4

我找到了一个不错的解决方案...

.page-header {
  @supports (-webkit-appearance:none) {
    .os-android & {
      min-height: calc(100vh - 56px);
    }
  }
}

取自here

Answer 5

我刚刚想出一种方法来调整元素的大小，以使高度不包括带有屏幕导航栏和浏览器顶部栏的android-home-less-smarthpones。如果内容大于屏幕，则元素应增长到可以容纳所有内容的大小，这就是为什么我要使用最小高度。

<script>
  window.addEventListener("resize", handleResize);
  function handleResize() {
    document.querySelectorAll(".header")[0].style.position = "fixed";
    document.querySelectorAll(".header")[0].style.top = "0";
    document.querySelectorAll(".header")[0].style.bottom = "0";
    document.querySelectorAll(".header")[0].style.minHeight = "auto";
    var h = document.querySelectorAll(".header")[0].clientHeight;
    document.querySelectorAll(".header")[0].style.position = "relative";
    document.querySelectorAll(".header")[0].style.minHeight = h + "px";
  }
  handleResize();
</script>

Answer 6

您可以通过设置高度来解决地址栏问题：html和body标签为100％当然，将航迹的边距和填充设为零而且您还可以在主div中进行滚动操作，以实现更好的控制效果

Answer 7

...那怎么办？

html,
body {
  width: 100vw;
  height: 100vh;
}
@media (max-width: 480px) {
  html,
  body {
    height: calc(100vh - 56px);
  }
}

显示地址栏时高度为100vh-Chrome移动

7 个答案: