Question

我正在寻找一个如何绘制响应方的解决方案，其中高度以％表示。

<div class="square"></div>

//CSS
.square{
  background: red;
  height: 49%;
  //and what else make this div square I found many solutions how to make it but it is dependent on width :(
}

viewport: <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

这个方块的包装是这个css的另一个div：

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;

Answer 1

可以使用padding-bottom技巧控制宽高比。

但请注意，此技术意味着您无法在子div中添加其他内联内容。

＆＃13;

div.parent {
  width: 80%;
  background: #c0ffee;
  margin: 25px auto;
}
.parent >div {
  width: 49%;
  padding-bottom: 49%;
  background: #000;
}

＆＃13;

<div class="parent">
  <div></div>
</div>

＆＃13;

如果需要与视口相关的大小，则存在视口单元。

＆＃13;

div {
  width: 49vh;
  height: 49vh;
  background: #c0ffee;
  margin: 25px auto;
}

＆＃13;

<div>
</div>

＆＃13;

Answer 2

以百分比给出的高度是根据其总宽度计算的。随着宽度的变化，高度也会发生变化。

Css div响应方格依赖于高度

2 个答案: