Javascript 重复背景直到达到高度_Javascript_Html_Css

Javascript 重复背景直到达到高度

javascript html css

Javascript 重复背景直到达到高度,javascript,html,css,Javascript,Html,Css,由于某些原因，我无法设置页面的最大高度代码如下： html { min-width: 100%; min-height: 100%; } body { margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; background-color: darkblue; height: 1200px; } .tile { display: inline-block

由于某些原因，我无法设置页面的最大高度

代码如下：

html
{
    min-width: 100%;
    min-height: 100%;
}

body
{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: darkblue;
    height: 1200px;
}

.tile {
    display: inline-block;
    width: 300px;
    height: 300px;
    /*border: 1px solid black;*/
    transition: 2s all linear;
    margin-top: -4px;
    margin-left: -4px;
}

以下是JSFIDLE：

此外，它还应在所有方向（宽度和高度）重复“正方形”，但当它们达到“背景高度/宽度限制”时会被切断

那么为什么我不能像我那样限制高度呢？

在你的

标题中设置高度等于100vh
height: 100vh;

CSS要求100%什么？你必须有一些引用，如果没有它，它将是100%无限的，所以它假设为0。需要有某个大小为的父元素，或者需要给它一个大小，然后可以在子元素上使用%。例如
HTML

身体{
宽度：1000px
高度：2000px；
}
第一分区{
宽度：90%；//将900px即1000px的90%
高度：100%；//将为2000px
} 

因此，当你说100%在上面什么都没有，你现在可以看到为什么CSS不知道你问什么。我们都知道这是你的屏幕大小，但这是相对的，CSS不知道你的屏幕大小
希望有帮助。我在你的代码中没有看到任何背景图像@如果单击JSFIDLE链接，您将看到完整的代码。JS代码画了两个方块作为我的背景。我没有“.title”，而是“.tile”，它表示“方块”应该有多大。因此，如果我要更改“.tile”类的高度/宽度，我会得到具有奇怪高度的正方形。与背景无关。我制作了一个“.wrap”类，并提供了您描述的设置，还更改了我的“body”类。我学到了一些新东西，但恐怕这仍然不能解决我的问题。
<body>

  <div class="first-div"></div>

</body>

body {
 width: 1000px
 height: 2000px;
}

div.first {
  width: 90%; // will 900px i.e. 90% of 1000px
  height: 100%; // will be 2000px
}