Question

我试图用CSS做一个非常简单的全屏网格。

此处仅提供相关代码：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

问题在于，即使3个div的总高度加起来达到100％，也会出现滚动条。我不希望滚动条显示，而overflow: hidden;不能解决问题，只会隐藏网格离屏的事实。如果它的高度为100％，为什么网格会离开屏幕？

我觉得我正在服用疯狂的药片。

Answer 1

我相信这种情况正在发生，因为保证金百分比值是根据包含元素的宽度计算的，而不是高度（正如您所期望的那样）。

请参阅：Why are margin/padding percentages in CSS always calculated against width?

如果您正在努力将行均匀分隔以填充页面的高度，Flexbox是一个很好的选择。查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Div高度加起来达到100％，但滚动显示

1 个答案: