Question

我有一个容器和一个容器。

<div id="container">
    <div class="myEm">
        ...
    </div>
</div>

我需要为该元素分配宽度和高度。应该是正方形。我可以计算相对于父容器的宽度，但是如何将相同的值传递给高度：

#container .myEm {
   width: calc(100% - 20px);
   height: ???
}

Answer 1

一种方法是使用填充底部（或顶部）来调整myEm的大小以保持其长宽比。这使得myEm严格来说是一个大小调整元素，并且您将需要一个内部尺寸可以调整大小的元素。例如，这就是我的意思：

myEm变为：

.myEm {
  height: 0;
  padding-bottom: calc(100% - 20px);
  position: relative;
  width: calc(100% - 20px);
}

然后，您需要在其中包含实际内容的元素：

.myEm-inner {
  background: red;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

示例：https://jsfiddle.net/dgmyxs9v/1/

Answer 2

您可以使用伪元素来保存包装div。

此解决方案将产生相同的效果-但也可以使div拉伸以适合内容-如果它变得太大而无法包含在正方形中。

/* sane box-sizing */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* box styling */
.box {
  margin: 10px;
  padding: 10px;
  width: calc(100% - 20px);
  background-color: tomato;
  font-size: 10px;
  float: left;
  max-width: 150px;
}

/* ––––––––––––––––––––––––––––––––––––-
   This is the aspect ratio part 
   ––––––––––––––––––––––––––––––––––––- */ 
.box::before {
  /* aspect ratio keeper – 100% = square */
  padding-bottom: 100%;
  float: left;
}

.box::before,
.box::after {
  content: '';
  display: table;
  clear: both;
}




/* second box */
.box:nth-of-type(2) { background-color: olive; }

<div class="box">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor facere maxime voluptatem nesciunt nihil repellendus culpa eligendi laudantium velit.</p>
</div>

<div class="box">
  <h2>Will stretch to content</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor facere maxime voluptatem nesciunt nihil repellendus culpa eligendi laudantium velit. Expedita labore iusto vero perspiciatis ex fuga natus cum molestiae ut, dolor.</p>
</div>

使用CSS计算动态高度

2 个答案: