在Firefox中将容器的高度调整为100%宽度

By simon at 2018-02-07 • 0人收藏 • 23人看过

我试图得到一个方形的div,这边等于宽度 容器。我通过添加ps来实现这个感谢eudo元素到我的 DIV:

.helper::before {
    content:'';
    padding-top:100%;
    float:left;
}
它适用于Chrome而不是Firefox。我没有想法。

2 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

这在Firefox中起作用,伪元素需要宽度。我添加了背景 颜色和高度/宽度,所以你可以看到它的工作帮手上

.helper::before {
 content:'';
 padding-top: 100%;
 width: 5px;
 background: blue;
 float:left;
}

.helper{
 background: red;
 height: 50px;
 width: 50px;
}
https://codepen.io/BenKingstown/pen/mXrbZK

2018-02-07   #2

这是你想要的吗? 我会编辑,如果你给我更多的信息.​​..

.container {
  margin: 0 auto;
  height: 500px;
  border: 1px solid black;
  width: 50vw;
}
.square {
  display: flex;
  border: 1px solid red;
  width: 100%;
}
.helper {
  overflow: hidden;
  height: 100%;
}
<div class="container">
  <div class="square helper">
    dfgdf
  </div>
</div>

登录后方可回帖

Loading...