如何将文本列的大小调整为页面的高度

Question

我有一栏文字。每个单词由

分隔

<br/>

让我们说 5 个词：

<div>
<p>Duck</p> <br/>
<p>Buck</p> <br/>
<p>Cuck</p> <br/>
<p>Wuck</p> <br/>
<p>Puck</p> <br/>
</div>

并且我希望此列的大小调整为页面的高度。有任何想法吗？我刚开始编程。

Answer 1

假设此 div 在正文级别（或者页面上没有其他内容）使用 CSS 设置 p 标签的样式以占据可用空间的 100/x% space 其中 x 是段落数。您可以按如下方式以编程方式执行此操作。

<div>
  <p>Duck</p> <br/>
  <p>Buck</p> <br/>
  <p>Cuck</p> <br/>
  <p>Wuck</p> <br/>
  <p>Puck</p> <br/>
</div>

<script>
  var pTags = document.getElementsByTagName("p");
  var count = pTags.length;
  var percent = 100 / count;
  for(var i = 0; i < count; i++) {
    pTags[i].style.height = percent + "%";
  }
</script>

Answer 2

视口高度即可。它用于相对于当前视口调整事物的大小。
1vw = 视口宽度的 1%
我在这里使用 100vh 来覆盖整个视口。

<div style="height: 100vh">
<p style="height: 20%">Duck</p> <br/>
<p style="height: 20%">Buck</p> <br/>
<p style="height: 20%">Cuck</p> <br/>
<p style="height: 20%">Wuck</p> <br/>
<p style="height: 20%">Puck</p> <br/>
</div>

或者，您可以将

的高度设置为100/（元素数量）vh。

.myList p{
  height:20vh; 
}

<div class="myList">
    <p>Duck</p> <br/>
    <p>Buck</p> <br/>
    <p>Cuck</p> <br/>
    <p>Wuck</p> <br/>
    <p>Puck</p> <br/>
</div>

如何将文本列的大小调整为页面的高度

How to resize column of text to the height of page

html

css

text

resize