动态设置divs font-size，以便div垂直填充屏幕

Question

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

divs＆＃39;身高取决于他们的内容，即内容的font-size。我想设置div的CSS，以便它们始终垂直填充窗口，而不是设置height，而是设置font-size更改。

我所描述的可能性是什么？请参阅下面的小提琴，了解页面的当前设置：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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，可以实现类似的效果。文本随盒子缩放（几乎）填充它。

我还从正文中移除了默认边距。无论什么都是全屏的，我建议你这样做，因为其他方面，你必须考虑到这一点。

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;