How do I give my text the same height as it's container?

Question

This is my HTML:

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

This is my CSS:

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

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

However, as my website is responsive, I would like the text "hello" to always have the same height as its parent container. How can I achieve this using CSS?

You define the height of the `.bigcontainer` as 20%; is that 20% of the height of the page or an ancestor element? Also, incidentally, you have a syntax error in your code, the two adjacent quote characters before the word 'container': `class=""container"` is, obviously, wrong. Remove the duplicate to give: `"class="container"`. — David Thomas, Jul 28 '19 at 12:51
possibly duplicate of https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container/19814948#19814948 — ni3solanki, Jul 28 '19 at 13:25
@ni3solanki | Clearly, my question is targeting the height where as the other question targets the width. It's in the title... — Tigerrrrr, Jul 28 '19 at 22:49
@DavidThomas | Sorry, I was on my phone, I didn't notice, thanks. — Tigerrrrr, Jul 28 '19 at 22:50

Ajithraj · Accepted Answer · 2019-07-29T14:26:52.153

Try setting the height of the html,body element to 100% or You need to give the container a fixed value(bigcontainer).

To make the text same height as it's container(bigcontainer). Get the container offsetHeight using javascript and assign it to the text as height and fontSize

I have added two container (bigcontainer) heights, one being 20% and the other 50%, so that the text height and text size changes.

Also i have added border:1px solid black to indicate the text height

if you need only text height remove y.style.fontSize=x+'px' and yy.style.fontSize=xx+'px'
if you need only text size (fontSize) remove y.style.height=x+'px' and yy.style.height=xx+'px'

Check the following examples

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>

score 0 · Answer 2 · answered Jul 28 '19 at 13:29

0

The vh is what you are looking for. Using the height as reference for the font-size is probably no problem for a short word as 'Hello' but if the word is longer then the word will wrap to the next line.

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

answered Jul 28 '19 at 13:29

bron

1,457
1
9
18

I probably should've mentioned that `%` was needed. – Tigerrrrr Jul 28 '19 at 22:51

How do I give my text the same height as it's container?

2 Answers2