0
CSSで非常に単純なフルスクリーングリッドを作成しようとしています。Divsの高さが100％になりますが、スクロールが表示されます
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>
\t <head>
<link rel="stylesheet" type="text/css" href="responsive.css"></link>
\t </head>
\t <body>
\t \t <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>
\t </body>
</html>問題は3つのdivの高さの合計が100％まで追加していてもスクロールバーが表示されていることである：
はここだけで、関連するコードです。私はスクロールバーが表示されないようにし、overflow: hidden;はグリッドがオフスクリーンになっているという事実を隠すだけでは問題を解決しません。高さが100％になるとグリッドがスクリーンから外れるのはなぜですか？
私は狂った薬を飲んでいるように感じる。
「.row-third：nth-child（n + 2）{margin-top：1.333333333333333％; } '？ – Turqueso
@Turqueso上端は常に2％です。私は 'quarter'や' fifth'のような小さなdivのクラスを持っていて、上のマージンは常に同じです。一方、高さの '1.333333333333333％ 'の補償は' third'クラスのみであり、他のすべてのクラスとは異なります。 divの高さを数えると100％になります。 – Alternatex
100％で3つの値を入れたいから100/3 = 33.333333333333333333 .............それは決して終了しませんが、99％では99のように大丈夫です/ 3 = 3または99.99999/3 = 33.33333 – DanyCode