Question

我有一些非常简单的html / css在一个body标签上使用100vh，而在两个内联块跨度上使用100％（或100vh，我已尝试过两者），每个跨度都有一个宽度为50vw。我希望看到两个并排的跨度，每个占据屏幕的一半，每个都和屏幕一样高 - 没有滚动条，没有空白区域。身体也有0的余量来帮助这个。我看到的是我所期望的，除了有一个小的垂直滚动条。我还从身体内部删除了所有空格，因为我知道这可以增加超过100％宽度的空间。但是我无法弄清楚为什么我会得到滚动条...我知道我可以添加一个溢出：隐藏到正文并且滚动条消失了，但是又一次 - 为什么滚动条在第一个位置？

这是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>

Answer 1

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

＆＃13;

    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }

＆＃13;

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

＆＃13;

Answer 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;
    }

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

以下是flex

body {
        height: 100vh;
        margin: 0;
        display: flex;
    }

    span {
        height: 100%;
        width: 50%;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }

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

以下是float

body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        float: left;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }

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

Answer 3

您可以通过向vertical-align: middle;添加<!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>来避免span元素下的空白区域：我今天学到了它并且非常简单

＆＃13;

Tiny MCE

＆＃13;

Answer 4

为“身体”添加此样式。

body
{
    box-sizing: border-box;
}

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

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

100vh导致滚动条？

4 个答案: