动态设置 div 字体大小，使 div 垂直填充屏幕

Question

我有两行四个 div，每行通过flexbox 设置以水平跨越页面。因此，div 的width 是动态的，并且始终适应窗口宽度。

div 的高度取决于其内容，即内容的font-size。我想设置 div 的 CSS 以便它们始终垂直填充窗口，而不是通过设置 height 而是通过 font-size 更改。

我所描述的可能吗？有关页面的当前设置，请参见下面的小提琴：

.banner {
  font-size: 5vw;
}

.flex {
	display: flex;
}

.row {
	flex-direction: row;
	justify-content: space-between;
}

.box {
	flex: 1;
	text-align: center;

	border: 1px solid black;
	background-color: white;

	box-sizing: border-box;
}

<div class="top" id="top">
		<div>
			<div class="flex row banner">
				<div class="box rotate-right">
					<p>
						1
					</p>
				</div>

				<div class="box rotate-left">
					<p>
						2
					</p>
				</div>

				<div class="box rotate-right">
					<p>
						3
					</p>
				</div>

				<div class="box rotate-left">
					<p>
						4
					</p>
				</div>
			</div>
      
     <div class="flex row banner">
				<div class="box rotate-right">
					<p>
						5
					</p>
				</div>

				<div class="box rotate-left">
					<p>
						6
					</p>
				</div>

				<div class="box rotate-right">
					<p>
						7
					</p>
				</div>

				<div class="box rotate-left">
					<p>
						8
					</p>
				</div>
			</div>

			</div>
		</div>

Answer 1

我不明白你为什么想要这个。现在是停下来思考一下您正在从事的任何项目是否需要它的好时机。

---

完成了吗？

如果你仍然认为你需要这个，我们开始吧。

CSS 有两个大小单位，它们取决于视口的宽度和高度，即vw 和vh。这些是从 1 到 100 的单位，100 是您使用的任何维度。一个例子：

div {
    height: 100vh; /* 100vh = 100% of the viewport height */
    width: 50vw; /* 50vw = 50% of the viewport width */
}

好消息是它可以在任何地方使用，不像百分比，百分比根据属性有不同的含义。

div {
    height: 100%; /* = 100% of parent element height */
    width: 100%; /* = 100% of parent element width */
    font-size: 100%; /* = 100% of parent element font size */
}

div {
    height: 100vw; /* = 100% of viewport height */
    width: 100vh; /* = 100% of viewport height */
    font-size: 100vh; /* = 100% of viewport height */
}

这是乏味的部分。根据您的问题，我了解到您希望文本填充给定元素的高度。对吗？

这现在取决于文本的行数。我的示例是单行文本，因为这就是您在问题中提出的内容。

---

单行文本（来自您的示例）

我将font-size 设置为40vh。将font-size 设置为50vh 似乎不起作用。然而，通过将高度设置为50vh 并将字体大小保留为40vh 可以实现类似的效果。文本随框缩放以（几乎）填充它。

我还从正文中删除了默认边距。每当有任何东西全屏时，我都建议您这样做，因为否则，您必须将其考虑在内。

.flex {
  display: flex;
}

body {
  margin: 0
}

.row {
  flex-direction: row;
  justify-content: space-between;
}

.box p {
  padding: 0;
  margin: 0;
}

.box {
  flex: 1;
  text-align: center;
  border: 1px solid black;
  background-color: white;
  box-sizing: border-box;
  font-size: 40vh;
  height: 50vh
}

<div class="top" id="top">
  <div>
    <div class="flex row banner">
      <div class="box rotate-right">
        <p>
          1
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          2
        </p>
      </div>

      <div class="box rotate-right">
        <p>
          3
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          4
        </p>
      </div>
    </div>

    <div class="flex row banner">
      <div class="box rotate-right">
        <p>
          5
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          6
        </p>
      </div>

      <div class="box rotate-right">
        <p>
          7
        </p>
      </div>

      <div class="box rotate-left">
        <p>
          8
        </p>
      </div>
    </div>

  </div>
</div>