Question

我试图在css中制作一个高度为100％的正方形的正方形。我知道我可以通过计算高度并将其应用于宽度和高度来实现这一点，但我只寻找css解决方案。

我找到following answer，但看起来宽度为100％。当我尝试用

制作高度100％时

.square{
    height: 100%;
    padding-right: 100%;
    background: red;
}

什么都没有显示出来（看看这个fiddle）。知道什么是错的吗？

Answer 1

试试这个http://jsfiddle.net/webtiki/c43QG/

.square{
    height:100vh;
    width:100vh;
}

Answer 2

您将第一时间高度设置为100％，下一行设置为0.为什么？

你必须添加高度：100％也是html

<style>
html, body{
    height: 100%;
    margin: 0;
}

.square{
    height: 100%;
    padding-right: 100%;
    background: red;
}
</style>
<div class="square"></div>

http://jsfiddle.net/9Nxjs/2/

Answer 3

我希望这会http://jsfiddle.net/r8732/

<div class="dummy_class">
  I am height : 100%
</div>

   html, body{
    height:100%;
}

.dummy_class{
    height:100%;
    background-color : red;
}

为你的html添加高度：100％

制作高度100％的正方形

3 个答案: