草庐IT

css 100vw、100vh出现滚动条怎么解决

张太难 2023-07-20 原文

要搞清楚这个问题首先要知道这两个单位（vw、vh）是什么意思。vw（vh）是相对于浏览器的视口宽度（高度）的，100vh等于浏览器的视口宽度，设置vw和vh会在视口发生变化时重新计算宽度和高度。

那么问题来了，什么是浏览器的视口，来看下面一张图：

上面这张图中，红色线条框起来的区域才是浏览器的视口，不是整个浏览器可视区域，也不是这个绿色背景覆盖的区域。

知道这些以后，我们给一个盒子设置100vw和100vh应该是让这个盒子刚好覆盖浏览器视口。那么为什么会出现横向和纵向的滚动条呢？

上面这张图的代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100vw;
        height: 100vh;
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

在代码中，我们给body中的一个class为box的盒子设置了宽度100vw，高度100vh，背景颜色green。我们会注意到，这个绿色背景与视口顶端和左端都有一定白色间隙。这个间隙是由于浏览器给body增加默认样式造成的，我们可以通过开发者工具面板看到这些浏览器样式，如下图：

可见浏览器给body设置了一个8px的外边距。

由于这个外边距的存在，而我们的盒子的高度是整个视口的高度，所以body的宽高会被绿色盒子撑开，从而导致视口无法完整显示body元素。

对于浏览器来说，有任何一个元素无法在视口内显示，浏览器就会自动加滚动条，这种滚动条（区别于由于设置了overflow:scroll出现的滚动条)永远出现在紧贴着视口的右侧或下侧，同时这种滚动条也是视口的一部分。
所以一开始视口无论横向和纵向都无法完整显示body元素，导致了出现了横向和纵向滚动条。
在不改变这个绿色盒子已有的这两个属性的情况下消除滚动条有如下方式，

  • 第一种解决方案是将body的上下左右外边距都设置为0。（注意如果有body有任何一个方向的外边距不为0，都会可能导致横向和纵向都出现滚动条，这是因为横向的滚动条的出现会使视口的高度变高，纵向滚动条的出现使得视口宽度变宽。）
  • 第二种解决方案是给绿色盒子设置max-width:100%使得横向滚动条消失。
  • 第三种解决方案是给body元素设置溢出隐藏（overflow:hidden)
  • 第四种解决方案是给html元素设置溢出隐藏overflow:hidden)


第三和第四种方案会导致一部分内容无法显示，随着可视区域变化，被隐藏的部分也会变化。

关于overflow补充一下细节：overflow是一个速写属性，包含overflow-x，overflow-y，所有元素的overflow值默认都是visible(可见）。其值可以取得scroll（出现滚动条）、hidden（隐藏溢出的部分）。在视口能正常显示所有元素的情况下，给body或html元素设置overflow:scroll会出现无法滑动的横向和纵向滚动条。
 

 

100cssxffxff0cxff0前端html

有关css 100vw、100vh出现滚动条怎么解决的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - Ruby 中的隐式返回值是怎么回事？ - 2

    所以我开始关注ruby​​，很多东西看起来不错，但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说，它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!)，其他人可能最终依赖于一个返回对方法的目的并不重要，并且有很大的改变机会。隐式返回有什么意义？有没有办法让事情变得更简单？总是有返回以防止隐含返回被认为是好的做法吗？我是不是太担心这个了？附言当人们想要从方法中返回特定的东西时，他们是否经常使用隐式返回，这不是让你组中的其他人更容易破坏彼此的代码吗？当然，记录一切并给出

  3. ruby - 怎么来的(a_method || :other) returns :other only when assigning to a var called a_method? - 2

    给定以下方法:defsome_method:valueend以下语句按我的预期工作:some_method||:other#=>:valuex=some_method||:other#=>:value但是下面语句的行为让我感到困惑:some_method=some_method||:other#=>:other它按预期创建了一个名为some_method的局部变量，随后对some_method的调用返回该局部变量的值。但为什么它分配:other而不是:value呢？我知道这可能不是一件明智的事情，并且可以看出它可能有多么模棱两可，但我认为应该在考虑作业之前评估作业的右侧...我已经在R

  4. ruby-on-rails - 我该怎么办 :remote location validation with CarrierWave? - 2

    我在我的Rails3示例应用程序上使用CarrierWave。我想验证远程位置上传，因此当用户提交无效URL(空白或非图像)时，我不会收到标准错误异常:CarrierWave::DownloadErrorinImageController#createtryingtodownloadafilewhichisnotservedoverHTTP这是我的模型:classPaintingtrue,:length=>{:minimum=>5,:maximum=>100}validates:image,:presence=>trueend这是我的Controller:classPaintingsC

  5. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  6. 电脑0x0000001A蓝屏错误怎么U盘重装系统教学 - 2

    　　电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug，只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢？来看看以下的详细操作方法教学吧。　　准备工作：　　1、U盘一个（尽量使用8G以上的U盘）。　　2、一台正常联网可使用的电脑。　　3、ghost或ISO系统镜像文件（Win10系统下载_Win10专业版_windows10正式版下载-系统之家）。　　4、在本页面下载U盘启动盘制作工具：系统之家U盘启动工具。　　U盘启动盘制作步骤：　　注意：制作期间，U盘会被格式化，因此U盘中的重要文件请注

  7. ruby - 使用 rbenv 和 ruby​​-build 构建 ruby​​ 失败，出现 undefined symbol : SSLv2_method - 2

    我正在尝试在配备ARMv7处理器的SynologyDS215j上安装ruby​​2.2.4或2.3.0。我用了optware-ng安装gcc、make、openssl、openssl-dev和zlib。我根据README中的说明安装了rbenv(版本1.0.0-19-g29b4da7)和ruby​​-build插件。.这些是随optware-ng安装的软件包及其版本binutils-2.25.1-1gcc-5.3.0-6gconv-modules-2.21-3glibc-opt-2.21-4libc-dev-2.21-1libgmp-6.0.0a-1libmpc-1.0.2-1libm

  8. ruby - EventMachine - 你怎么知道你是否落后了？ - 2

    我正在研究使用EventMachine支持的twitter-streamruby​​gem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？ 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@

  9. ruby - 如果它是标点符号，我怎么能从字符串中删除最后一个字符，在 ruby​​ 中？ - 2

    啊，正则表达式有点困惑。我正在尝试删除字符串末尾所有可能的标点符号:ifstr[str.length-1]=='?'||str[str.length-1]=='.'||str[str.length-1]=='!'orstr[str.length-1]==','||str[str.length-1]==';'str.chomp!end我相信有更好的方法来做到这一点。有什么指点吗？ 最佳答案 str.sub!(/[?.!,;]?$/,'')[?.!,;]-字符类。匹配这5个字符中的任何一个(注意，。在字符类中并不特殊)?-前一个字符或组

  10. ruby - 为什么 return 关键字会导致我的 'if block' 出现问题？ - 2

    下面的代码工作正常:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson)do|key,oldv,newv|ifkey==:aoldvelsifkey==:bnewvelsekeyendendputskerson.inspect但是如果我在“ifblock”中添加return，我会得到一个错误:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson

随机推荐