Question

我的计划是让我的网站背景基本上是一个正方形网格。问题是我需要正方形，好吧，正方形，这意味着宽度和高度需要相同。然而，它们也需要在整个页面上填充一侧没有截断方块，并且需要重新调整尺寸（基本上，它们需要是百分比。）如果不清楚，请告诉我 - 就像我一样我相信你们都会的。

我考虑了几种（两种）不同的方法，第一种是简单的CSS。我知道垂直高度有VH，它可以检测屏幕的高度并将其转换为测量值。也许宽度相当于？如果是这样，我可以将它设置为1 W x 1 W，例如。但是我找不到一个。

如果那是不可能的，我很确定唯一的另一个选择是jQuery。我必须有一个以像素为单位得到屏幕宽度的函数，并且变量（X）等于宽度除以100.我可以将高度设置为10X，将宽度设置为10％。这个问题是必须在每个重新调整大小的屏幕上运行该功能，并考虑到我在慢速互联网连接上可能会有点滞后的方格数。

也许我过于复杂了。有没有人有解决方案？

Answer 1

有一个vw单位（根据视口/窗口宽度工作）。 1vw表示窗口宽度的1/100。

Answer 2

填充是根据宽度计算的，因此您可以将元素设置为0高度，并设置填充。

<强> HTML：

<div id="wrapper">
    <div class="tenth">
        1
    </div>
    <div class="tenth">
        2
    </div>
    <div class="tenth">
        3
    </div>
    <div class="tenth">
        4
    </div>
    <div class="tenth">
        5
    </div>
    <div class="tenth">
        6
    </div>
    <div class="tenth">
        7
    </div>
    <div class="tenth">
        8
    </div>
    <div class="tenth">
        9
    </div>
    <div class="tenth">
        10
    </div>
    <div class="tenth">
        11
    </div>
    <div class="tenth">
        12
    </div>
    <div class="tenth">
        13
    </div>
    <div class="tenth">
        14
    </div>
    <div class="tenth">
        15
    </div>
    <div class="tenth">
        16
    </div>
    <div class="tenth">
        17
    </div>
    <div class="tenth">
        18
    </div>
    <div class="tenth">
        19
    </div>
    <div class="tenth">
        20
    </div>
</div>

<强>的CSS：

#wrapper{
    font-size:0;
}
.tenth {
    font-size:1rem;
    height: 0;
    width: 10%;
    padding-bottom: 10%;
    box-sizing:border-box;
    display:inline-block;
    border:1px solid black;
    margin:0;
}

小提琴： http://jsfiddle.net/trex005/xc7Lgzr9/

如何获得Div高度等于窗口宽度的百分比？

2 个答案: