100vh导致滚动条？答案

【问题标题】：100vh results in scroll bar?100vh导致滚动条？
【发布时间】：2016-04-17 13:30:07
【问题描述】：

我有一些非常简单的 html/css，在 body 标记上使用 100vh，在两个内联块跨度上使用 100%（或 100vh，我都尝试过），每个跨度的宽度为 50vw。我希望看到两个跨度并排，每个都占据屏幕的一半，并且每个都与屏幕一样高 - 没有滚动条，没有空白。 Body 也有 0 的边距来帮助解决这个问题。我看到的是我所期望的，只是有一个小的垂直滚动条。我还从正文中删除了所有空白，因为我知道这可以添加超过 100% 宽度的空间。但我不知道为什么会出现滚动条...我知道我可以添加一个 overflow: hidden 到 body 并且滚动条消失，但又一次 - 为什么滚动条放在首位？

这是html文件：

<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }
</style>
</head>
<body><span id="left"></span><span id="right"></span></body>
</html>

【问题讨论】：

尝试将vertical-align: top; 添加到span - jsfiddle.net/g3u9hckL

标签： html css

【解决方案1】：

不幸的是，这就是内联元素的本质。您需要添加vertical-align:top 以强制没有行高和其他与字体相关的间距。

    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }

&lt;span id="left"&gt;&lt;/span&gt;&lt;span id="right"&gt;&lt;/span&gt;

【讨论】：

我的答案更好，它有vertical-align: middle; ? 但无论如何我今天的投票上限^^
@CodeiSir 什么？ vertical-align: middle 到底有多好？
@JoshCrozier 不是，是一样的
好的，我明白了 - 默认是 veritcal-align: 基线，所以微小的额外空间来自字体下降。荒野。所以即使是vertical-align:bottom也可以解决这个问题——除了默认的vertical-align:baseline之外的任何东西。
好吧，也许我不明白！ :) 如果我删除了垂直对齐：顶部但向跨度添加了一些内容，那么滚动条也会消失。只有跨度为空时才会出现 - 我看不出它是如何连接到垂直对齐的。

【解决方案2】：

这是因为内联元素的空白边距。

在这里，我使用了margin-bottom: -4px; hack（还有更多）来删除它。不过请注意，使用此 hack 时，您需要根据当前字体大小检查它并进行相应调整。

如果你真的需要内联块，请使用vertical-align hack

更好的方法是使用flex 或float（以支持旧版浏览器）。

这里是margin-bottom: -4px;

    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
        margin-bottom: -4px;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }

  &lt;span id="left"&gt;&lt;/span&gt;&lt;span id="right"&gt;&lt;/span&gt;

这里是flex

body {
        height: 100vh;
        margin: 0;
        display: flex;
    }

    span {
        height: 100%;
        width: 50%;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }

&lt;span id="left"&gt;&lt;/span&gt;&lt;span id="right"&gt;&lt;/span&gt;

这里是float

body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        float: left;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }

&lt;span id="left"&gt;&lt;/span&gt;&lt;span id="right"&gt;&lt;/span&gt;

【讨论】：

@LGSon margin-bottom: -4px; 不是一个合适的解决方案，如果你增加 font-size 那么它就不起作用 - jsfiddle.net/torbd8g0
@Anonymous 没错，这就是我建议浮动或弹性的原因。
我认为这与“内联空白边距”无关。如果我的示例中的 span 为空，您将获得额外的空白区域和一个小滚动条。如果我将任何内容放入跨度中，这就会消失并且页面会按预期显示。拥有内容不可能比没有内容占用更少空间。
@user3399706 确实如此，查看这 2 个小提琴演示，您会看到 ... jsfiddle.net/LGSon/822bs63m ... jsfiddle.net/LGSon/822bs63m/1
当然，我可以通过多种方式避免此问题 - 更改为浮点数，使用 position: absolute 等。我正在尝试确定我所看到的是否是浏览器问题，这我相信是（见我之前的评论）。有趣的是，我尝试过的所有浏览器都做同样的事情，这似乎使我认为这是浏览器问题的论点无效。仍然 - 向空跨度添加内容也会使滚动条消失，这对我来说没有意义。 :)

【解决方案3】：

你可以通过添加vertical-align: middle;来避免span元素下的空白：我今天学到了，很简单?

<!DOCTYPE html>
<html>

<head>
  <title>Insert title here</title>
  <style>
    html {
      height: 100vh;
    }
    body {
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    span {
      height: 100%;
      width: 50%;
      display: inline-block;
      vertical-align: middle; /* here */
    }
    #left {
      background-color: red;
    }
    #right {
      background-color: green;
    }
  </style>
</head>

<body><span id="left"></span><span id="right"></span>
</body>

</html>

【讨论】：

【解决方案4】：

为“body”添加此样式。

body
{
    box-sizing: border-box;
}

我不必对原始 CSS 进行任何其他更改。

https://www.w3schools.com/css/css_rwd_grid.asp

【讨论】：