删除html/身高底部的空格: 100%布局
删除html/身高底部的空格: 100%布局
提问于 2016-11-12 11:16:45
我试图将一个页面分成两个相等的区域，每个区域占页面高度的100%，页面宽度的50%。
但是，这会导致页面底部出现一个恼人的空格，这也会导致整个页面上出现一个恼人的滚动条。
通常，我会使用浏览器的DOM检查器来查找导致不需要的空间的原因，但在这里没有用，因为空格似乎位于html标记(?!)之外。
HTML如下所示(为了清晰起见，正文之外的所有内容都省略了)
<body><div id="box1"></div><div id="box2"></div></body>CSS如下：
* { box-sizing: border-box; border: 1px solid red; }
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
display: inline-block;
}
#box1 {
height: 100%;
width: 50%;
background-color: blue;
}
#box2 {
height: 100%;
width: 50%;
background-color: green;
}我还创建了一个JSFiddle，它成功地复制了问题。
我偶然发现了类似的这个问题，但是没有一个答案解释了为什么会出现这种情况(这个答案确实给出了一个解释，说明了当img标记出现时)，所有的修复看起来都像是黑客或解决方案。
编辑:针对评论(似乎已经消失)，问题在Firefox 49.02中的Fiddle和Windows 10上的Edge 38.14393.0.0中被复制。它也出现在Chrome 54.0.2840.71中，但不那么引人注目(如果我的窗口最大化了，滚动条似乎不会移动)。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-12 12:05:06
我相信有些人会补充的，但我的理解是.
你有div {display: inline-block;}。内联块有点像块，但被视为文本，因此行高很重要。如果您将CSS的第一行更新为..。
* { box-sizing: border-box; border: 1px solid red; line-height: 0;}...the空白将消失。在你的小提琴里玩线高来改变你的空白处。值14 me及以上开始为我添加空格。
Stack Overflow用户
发布于 2016-11-12 11:32:01
只需在正文标记css中添加overflow:hidden即可。
* { box-sizing: border-box; border: 1px solid red; }
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}
div {
display: inline-block;
}
#box1 {
height: 100%;
width: 50%;
background-color: blue;
}
#box2 {
height: 100%;
width: 50%;
background-color: green;
}<body><div id="box1"></div><div id="box2"></div></body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40562282
复制相关文章
相似问题
腾讯云开发者
