Question

这是我的HTML：

<div class="bigcontainer">
    <div class="container">
      <div>hello</div>
    </div>
</div>

这是我的CSS：

.bigcontainer {
  height: 20%;
  width: 100%;
} 

.container {
  height: 100%;
  width: 100%;
}

我的网站反应灵敏。我希望文本hello与文本父级的高度相同。

Answer 1

尝试将html，body元素的高度设置为100％。

使文本与容器的高度相同。使用JavaScript获取容器offsetHeight，并将其分配给文本，分别为height和fontSize

我添加了两个 容器高度，一个是 20％，另一个是 50％，因此文本高度和文本大小 更改

我还添加了border:1px solid black来表示 text height

检查以下示例

var x = document.getElementsByClassName('container')[0].offsetHeight;
var y = document.getElementById('idname');
y.style.fontSize=x+'px';
y.style.height=x+'px';

var xx = document.getElementsByClassName('container2')[0].offsetHeight;
var yy = document.getElementById('idname2');
yy.style.fontSize=xx+'px';
yy.style.height=xx+'px';

body,html {
  height:100%;
  margin:0;
  padding:0;
}

.bigcontainer {
  height: 20%;
  width: 100%;
} 
.container {
  width: 100%;
  height:100%;
}
.container div{
  height:100%;
  border:1px solid black;

}

.bigcontainer2 {
  height: 50%;
  width: 100%;
} 
.container2 {
  width: 100%;
  height:100%;
}
.container2 div{
  height:100%;
  border:1px solid black;

}

<div class="bigcontainer">
    <div class="container">
      <div id='idname'>hello</div>
    </div>
</div>

<div class="bigcontainer2">
    <div class="container2">
      <div id='idname2'>hello</div>
    </div>
</div>

Answer 2

vh是您要寻找的。对于作为“ Hello”的简短单词，将高度用作字体大小可能没有问题，但是如果单词较长，则该单词将换行到下一行。

html, body {
    height: 100%;
}
.bigcontainer {
    width: 100%;
    height: 15vh;
} 
.container {
    width: 100%;
    height: 100%;
    padding: 0 0 2vh;
    font-family: sans-serif;
    font-size: 15vh;
    line-height: 1;
}

如何为文本赋予与容器相同的高度？

2 个答案: