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

bq9c1y66 于 2023-02-06 发布在其他

关注(0)|答案(9)|浏览(346)

我遇到过几次这个问题，想知道有没有解决这个问题的方法。我的问题发生在Chrome移动的应用程序上。在那里，你可以向下滚动一点，地址栏就消失了。到目前为止，一切顺利，让我们举个例子：
容器的height设置为100vh。

如你所见，底部被切掉了。
当我向下滚动时，它看起来像这样：

现在看起来不错了。显然Chrome会将地址栏的高度计算到视口高度中。所以我的问题是：
有没有办法，不管有没有地址栏，它看起来都一样？这样容器就会膨胀什么的？

css

来源：https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile

9条答案

按热度按时间

rkue9o1l1#

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

赞(0）回复(0）举报 2023-02-06

aurhwmvo2#

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

赞(0）回复(0）举报 2023-02-06

ttygqcqt3#

从开发人员的Angular 来看，社区仍然没有严格的协议，浏览器应该如何处理顶部、底部和侧面板的移动。
问题中提到的问题是众所周知的：

1.这一切都始于Apple Webkit Issue，其中一个问题是网站开发人员使用vh来计算字体大小（calc（100/vh * something））.如果100vh是动态的，当用户向下滚动并且地址栏被隐藏时，那么字体大小，如任何其他绑定元素，将被扭曲，产生非常差的用户体验，更不用说是CPU/GPU密集型任务。
苹果公司的决定是 * 匹配更大尺寸的屏幕（没有地址栏），以100vh不断 *。所以，当地址栏显示，你使用100vh高度的底部将走出屏幕。许多开发人员不同意这一决定，并认为视口单位是动态的，完全等于可见的"视口"。
1.谷歌Chrome团队决定与苹果浏览器兼容，并坚持同样的决定。

height: 100%在大多数现代浏览器中等于真实可见部分，即高度变化，并取决于在滚动期间地址栏是可见还是隐藏。
1.横条不仅可以出现在屏幕的顶部，也可以出现在底部（现代iOS），屏幕键盘可以缩短视图。有一个nice demo可以检查移动设备的实际大小100vh vs 100%。

- 溶液1**

html, body { height: 100%; }
.footer-element { 
  position: fixed; 
  bottom: 10px;
}

- 溶液2**

补偿对vh的一些依赖性，可见栏高度等于"100vh-100%"，当栏隐藏时，差异将为0。

html, body { height: 100vh; }
.footer-element { 
  position: fixed; 
  bottom: calc(10px + (100vh - 100%));
}

赞(0）回复(0）举报 2023-02-06

46qrfjad4#

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

现在让我们用JavaScript获取视口的内部高度：

// 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`);

来源：https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

赞(0）回复(0）举报 2023-02-06

eblbsuwk5#

你可以修正地址栏设置高度的问题：100%在html和body标签和小康当然设置边距和填充的身体为零，也可以处理滚动在您的主要div更好地控制

赞(0）回复(0）举报 2023-02-06

s4chpxco6#

我刚刚想出了一个调整元素大小的方法，这样元素的高度就不包括那些只有屏幕导航栏和浏览器顶栏的没有主按钮的安卓智能手机了。如果内容比屏幕大，元素应该增长到可以容纳所有内容的大小，这就是为什么我使用最小高度。
编辑：
使用类而不是更改JS中的样式添加了代码段

// save old window size to adjust only if width changed
let oldWidth = window.innerWidth,
  oldHeight = window.innerHeight;
// element to adjust
const target = document.querySelector(".vh100");
// adjust the size if window was resized
window.addEventListener("resize", handleResize);

function handleResize(initial = false) { // the parameter is used for calling the function on page load
  /*
   * if the width changed then resize
   * without this Chrome mobile resizes every time navbar is hidden
   */
  if (window.innerWidth !== oldWidth || initial) {
    // stretch the target
    target.classList.add("setting-100vh");
    // save height and apply as min height
    const h = target.clientHeight;
    target.classList.remove("setting-100vh");
    target.style.minHeight = h + "px";
  }
}
// call when page is loaded
handleResize(true);

* {
  margin: 0;
}

.vh100 {
  background-color: green;
}

/*
* Stretch the element to window borders and save the height in JS
*/

.setting-100vh {
  position: fixed;
  top: 0;
  bottom: 0;
  min-height: unset;
}

<body>
  <header class="vh100">
    <h1>100vh on mobile</h1>
  </header>
  <main>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsa officia mollitia facilis esse cupiditate, nisi recusandae quas id enim alias eaque suscipit voluptates laudantium quasi saepe deserunt labore fuga deleniti placeat, necessitatibus
      quibusdam. Quaerat adipisci provident minima laboriosam modi ullam accusamus error dolores iure ducimus laborum similique distinctio temporibus voluptas nulla quod ipsa, nostrum quam cumque id animi unde consectetur incidunt! Dolorem sed quisquam
      at cumque. Cumque non nam exercitationem corporis? Minus sed explicabo maiores ipsam ratione. Quam, fugit asperiores nesciunt dolores culpa, numquam blanditiis sint dolorum ex corrupti illo veniam nostrum odio voluptatibus accusantium ullam impedit
      eligendi voluptates?</p>
  </main>
</body>

赞(0）回复(0）举报 2023-02-06

bejyjqdl7#

我遇到了一个类似的问题，并将此解决方案用于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>
  );
};

赞(0）回复(0）举报 2023-02-06

watbbzwu8#

我只是想在上面的答案上做一点扩展--我发现正如上面提到的Ross Light，你想使用height: 100%来解释web浏览器的地址栏，然而，为了使它工作，你必须将html标签和body标签的高度设置为等于height: 100%，否则你的div将无法正确扩展：

<!DOCTYPE html>
<html>
  <head>

    <style>

      html, body {
        height: 100%;
      }

      .fillViewport {
        height: 100%;
      }

      .redBackground {
        background-color: red;
      }

    </style>

  </head>
  <body>

    <div class="fillViewport redBackground"></div>

  <body>
</html>

赞(0）回复(0）举报 2023-02-06

hwamh0ep9#

下面的代码片段对我很有效，我在main标记中插入了一个边框作为 Package 器的示例。

* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  position: fixed;
  padding: 0.5rem;
  height: 100%;
  width: 100%;
}

body {
  position: relative;
  height: 100%;
  width: 100%;
}

main {
  position: relative;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

赞(0）回复(0）举报 2023-02-06

我来回答

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

9条答案

相关问题

热门标签

最新问答