我正在尝试使用 CSS 制作一个非常简单的全屏网格。
这里只有相关代码:
html, body {
height: 100%;
padding: 0;
margin: 0;
font-size: 0;
}
[class*='col-'] {
display: inline-block;
height: 100%;
background-color: red;
}
.row-third {
height: calc(100% / 3 - 1.333333333333333%);
}
.row-third:nth-child(n+2) {
margin-top: 2%;
}
.col-third {
width: calc(100% / 3 - 1.333333333333333%);
}
.col-third:nth-child(n+2) {
margin-left: 2%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="responsive.css"></link>
</head>
<body>
<div class="row-third">
<div class="col-third">
</div>
<div class="col-third">
</div>
<div class="col-third">
</div>
</div>
<div class="row-third">
<div class="col-third">
</div>
<div class="col-third">
</div>
<div class="col-third">
</div>
</div>
<div class="row-third">
<div class="col-third">
</div>
<div class="col-third">
</div>
<div class="col-third">
</div>
</div>
</body>
</html>问题是，即使 3 个 div 的总高度加起来达到 100%，也会出现滚动条。我不希望滚动条显示并且 overflow: hidden; 不会解决问题，只会隐藏网格离开屏幕的事实。如果网格的高度应该是 100%，为什么它会离开屏幕？
我觉得我正在服用疯狂的药片。
最佳答案
我相信这是因为边距 % 值是根据包含元素的宽度 计算的，而不是高度(如您预期的那样)。
参见:Why are margin/padding percentages in CSS always calculated against width?
如果您正在努力使行均匀分布以填充页面的高度，Flexbox 是一个很好的选择。查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于html - Divs 高度加起来达到 100% 但滚动显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36318734/