问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

100vh 导致滚动条？

社区维基
1
新手上路，请多包涵

我有一些非常简单的 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>

原文由 TwinFeats 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 680
1 个回答
得票最新
社区维基
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;
    }

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

原文由 Joseph Marikle 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题