首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么隐藏地址栏时html { height:100% }不起作用?

隐藏地址栏是一种常见的前端开发需求,但是使用html { height:100% }来实现这个效果通常是无效的。这是因为html元素的高度并不能直接影响浏览器地址栏的显示与隐藏。

隐藏地址栏的常见方法是通过浏览器的全屏模式或者滚动隐藏等技术来实现。以下是几种常见的解决方案:

  1. 使用JavaScript进行全屏模式:可以使用document.documentElement.requestFullscreen()方法来请求进入全屏模式,但是需要用户手动触发。具体代码如下:
代码语言:txt
复制
function enterFullScreen() {
  var elem = document.documentElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

要退出全屏模式,可以使用document.exitFullscreen()方法。

  1. 使用滚动隐藏地址栏:当页面滚动时,地址栏通常会自动隐藏。可以通过JavaScript监听滚动事件,如果用户滚动页面,则将页面滚动到顶部,以达到隐藏地址栏的效果。具体代码如下:
代码语言:txt
复制
var lastScrollTop = 0;
window.addEventListener("scroll", function(){
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > lastScrollTop){
    window.scrollTo(0, 1);
  }
  lastScrollTop = st;
});

需要注意的是,以上方法仅仅是一些常见的解决方案,具体的实现方式还需根据具体的业务需求和浏览器兼容性进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端小知识:为什么你写的 height100不起作用

100%很容易就实现的,但是这里的height却不能设置成%比的(该元素会消失看不见),这是为什么呢?...即父元素的高度只是一个缺省值:height: auto;我们设置height100%,是要求浏览器根据这样一个缺省值来计算百分比高度,只能得到undefined的结果。...参考:http://www.webhek.com/post/css-100-percent-height.html 4.如何解决 现在你知道了吧,%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的...全部代码如上,可以看到设置了line-height100%没有居中,这是为什么呢,因为这时候的%是相对于字体尺寸的?所以直接作用于没有绝对高度的元素是不行的。...,虽然感觉并不会这样用到,但是居中还是很灵验的~ 6.源码 https://github.com/JiaXinYi/ife-study/blob/master/height/height.html 觉得本文对你有帮助

1.7K50
  • 在移动端避免使用100vh「建议收藏」

    核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能,地址栏有时可见,有时隐藏,改变了视口的可见大小。...这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为隐藏地址栏的浏览器高度。结果是,当地址栏可见,屏幕的底部部分将被切断,从而破坏了100vh的初衷。...如下所示: 当地址栏可见,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应该在屏幕底部的按钮被隐藏了。...更糟糕的是,当用户第一次使用手机访问网站地址栏会显示在页面顶部,因此用户体验是很糟糕的。...如果地址栏隐藏的,那么window.innerHeight将是屏幕可见部分的高度,正如您所期望的那样。

    2.6K21

    移动端避免使用100vh

    这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为浏览器的高度,并隐藏地址栏。结果是,当地址栏可见,屏幕的底部将被切除。...如下所示: 当显示地址栏,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...如果地址栏隐藏的,则window.innerHeight将是屏幕上可见部分的高度,这正是您所期望的。 在Wordsheet.io上学习,您可以看到这一点。...无论地址栏是否可见,屏幕都将是视口的高度。此外,通过在页面首次加载将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。...height: 100vh 非常接近 ,但鉴于其在移动设备上的局限性,最好避免使用它。

    2K20

    避免在移动端页面中使用100vh

    如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。...当视口高度变化时,这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度,而是将100vh设置为隐藏地址栏的浏览器的高度(其实就是100vh高度没变,但是地址栏那块把内容顶出去了一块)。...结果导致:当地址栏可见,屏幕的底部将被切断,从而破坏了开始100vh的目的。...如果地址栏处于隐藏状态,则window.innerHeight就是你期望的只是屏幕可见部分的高度。 在Wordsheet.io上学习,你可以看到这一点。...无论地址栏是否可见,屏幕都将是视口的高度。此外,在页面首次加载将高度固定为适当的大小,可以防止在使用该网站的过程中地址栏隐藏,从而带来尴尬的屏幕调整大小体验。

    1.6K30

    移动端避免使用100vh

    这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为浏览器的高度,并隐藏地址栏。结果是,当地址栏可见,屏幕的底部将被切除。 如下所示: ?...当显示地址栏,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...如果地址栏隐藏的,则window.innerHeight将是屏幕上可见部分的高度,这正是您所期望的。 在Wordsheet.io上学习,您可以看到这一点。...无论地址栏是否可见,屏幕都将是视口的高度。此外,通过在页面首次加载将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。...height: 100vh 非常接近 ,但鉴于其在移动设备上的局限性,最好避免使用它。

    1.8K20

    overflow:hidden属性

    这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。...也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。...overflow:hidden同样会隐藏position:absolute的子元素 [html] view plain copy print? <!...:100px;               width:100px;               background-color:red           }           .overHidden...这种情况通常会出现在我们在做一些具有弹出或下拉的控件,所以还是把弹出层直接放到body中比较可靠。

    1.6K10

    如何使用Markdown设置图片样式

    width="150" height="100" /> image.png 这样做是有效的,并且为您提供了对结果HTML的无限制控制。...当您这样做,它实际上对浏览器来说什么也不做,而且一般用户也不会在浏览器的地址栏中看到它。但它对我们的造型需求很有用。在这里,我们将添加一个缩略图片段到图像的源URL: !...下面是如何编写一个CSS选择器,将匹配的图像与这个“缩略图”信息在URL: img[src*="#thumbnail"] { width:150px; height:100px; } img...[src*=”#thumbnail”] { width:150px; height:100px; } 如果#thumbnail出现在src属性中的任何位置,则*=选择器语法匹配。...:100px; } img[src~="bordered"] { border: 1px solid black; } img[src~=”thumbnail”] { width:150px; height

    4.3K20

    移动端常见问题解决方案

    文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况,可以选择禁止: html { -webkit-text-size-adjust: 100%; } 禁止选中内容 如果你不想用户可以选中页面中的内容...min-width:320px; max-width:750px; margin:0 auto; font-size:14px; background:#fff; line-height...:1.5; } 动态获取html根字体大小 //注意为html添加id='htmlFt' ;(() => { function autoResize() { document.getElementById...normalize.css – 官网下载 normalize.css – github 三、meta标签设置 适应移动端 不对网站进行缓存 多核浏览器,优先使用最新版本的IE 和 Chrome 内核 添加到主屏幕隐藏地址栏和状态栏...(即全屏) 当我们将一个网页添加到主屏幕,会更希望它能有像 App 一样的表现,没有地址栏和状态栏全屏显示,代码如下: 该方案在 iOS 和 Android5.0+ 上都通用。

    1.2K10

    html与body的一些研究与理解

    当标签无背景样式,的背景色其实不是标签的背景色,而是浏览器的。...为什么IE会产生双固定条,里面那一个肯定是的,那么外面的那一个呢?...或是没有设置height属性,则高度百分比不起作用;其二,标签本身的属性,如果inline属性的标签,如果没有浮动,zoom,或是绝对定位之类属性是不支持百分比高度的,block或inline-block...要想让Firefox浏览器也支持的height:100%是简单的,就是设置标签height:100%,一旦设置了height:100%则无论哪个浏览器下都支持height...关于body overflow隐藏 (新增与2019-03-01) 单纯如下body overflow是无法隐藏高度不足一屏的元素的,例如: body { height: 30px; overflow

    2.1K30

    CSS | 视差滚动 | 笔记

    这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分,而是将 100vh 设置为隐藏地址栏的浏览器高度。...结果是,当地址栏可见,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...在上图中,应该在屏幕底部的按钮被隐藏了。 更糟糕的是,当用户第一次使用手机访问网站地址栏会显示在页面顶部, 因此用户体验是很糟糕的。...如果地址栏隐藏的,那么 window.innerHeight 将是屏幕可见部分的高度, 正如您所期望的那样。...; right: 10px; } height: 100%; body, html { height: 100%; } .parallax { /* The image used */

    73421

    【译】Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例

    前端开发人员在构建网站需要做出的决定之一就是添加图片的技术。它可以是HTML ,也可以是通过CSS背景生成的图片,也可以是SVG 。...在这篇文章中,我们除了提到各种包含图片的方法外,还将了解到每种方法的优点和缺点,以及什么时候和为什么要使用每种方法的来龙去脉。...Demo 1.2 用CSS隐藏图片 可以用CSS隐藏图片,但是它仍然会被加载到页面中。因此,在执行此操作请小心,如果一个图片应该被隐藏,那么它可能是出于装饰的目的。...请参见下面的HTML: <image href="cheesecake.jpg" height="100%" width="100%"...我们可以通过强制浏览器显示图片来解决这个问题,虽然这对Firefox和IE来说不起作用

    5.6K20

    前端运用图片的技巧总结

    在这篇文章中,我们将学习各种图片添加方式,以及每种方式的优缺点,以及什么时候和为什么要使用每种方式的上下文。 HTML 元素 在最简单的情况下,image元素必须根据需要包含src属性。...editors=0100 用CSS隐藏图片 一张图片可以用CSS隐藏起来。但是,它仍然会被加载到页面中。因此,在做的时候请注意。如果一个图片应该被隐藏,那么可能是为了装饰目的。... 与 的使用方法 现在的问题是,要添加一个内边框,我们不能使用内嵌框阴影,因为它在图片上不起作用。解决的办法是将头像包裹在 中,并为内边框添加一个专用元素。...我们可以通过强制浏览器显示图片来解决这个问题,虽然这对Firefox和IE来说不起作用

    2.6K20

    【Web技术】610- Web上的图片技巧

    在这篇文章中,我们将学习各种图片添加方式,以及每种方式的优缺点,以及什么时候和为什么要使用每种方式的上下文。 HTML 元素 在最简单的情况下,image元素必须根据需要包含src属性。...editors=0100 用CSS隐藏图片 一张图片可以用CSS隐藏起来。但是,它仍然会被加载到页面中。因此,在做的时候请注意。如果一个图片应该被隐藏,那么可能是为了装饰目的。... 与 的使用方法 现在的问题是,要添加一个内边框,我们不能使用内嵌框阴影,因为它在图片上不起作用。解决的办法是将头像包裹在 中,并为内边框添加一个专用元素。...我们可以通过强制浏览器显示图片来解决这个问题,虽然这对Firefox和IE来说不起作用

    2.9K30
    领券