Dynamically scale header height

Question

So I have the following structure HTML

<div>
    <header>Esse é o cabeçalho</header>
    <article>Esse é o artigo que vem sobre do cabeçalho</article>
</div>

I’ve got about 10 div's one below the other.

The problem: Has header that has a very large text like 10 words and other smaller ones. So when I will reduce the screen to mobile the header previously occupied 1 line now occupies 2 lines.

And this, hinders the use of line-height 1-line.

Is there any resource where I can calculate in running time and apply for each header the line-header correspondent?

I’m actually doing something like:

div > header {
   height: 50px;
   line-height: 50px;
}

But it only works for one line.

Some recourse?

Answer 1

When evaluating this structure it is clear that you tried to center the text vertically within the div using a line-height: 50px; of the same value as height: 50px;. It’s not that this is totally wrong, but it’s a scam, you shouldn’t use line-height to do text alignment... line-height is to control the distance between a line is another, not to centralize anything, 90% of the time I see this property being used is misguided, its usefulness is only for typographical formatting of the text.

The line-height CSS Property sets the height of a line box. It’s commonly used to set the Distance between Lines of text.

I recommend you go to this link to see the property working in a practical example and see the documentation and application https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

A simple alternative is to put display: flex on div > header and align the text with align-itens: center. So even if the text breaks line it will remain in the center of the header

header,
article {
  border: 1px solid #000;
}
div > header {
   height: 50px;
   display: flex;
   align-items: center;
}

<div>
  <header>Esse é o cabeçalho</header>
  <article>Esse é o artigo que vem sobre do cabeçalho</article>
</div>
<div>
  <header>Esse é o cabeçalho Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. autem!</header>
  <article>Esse é o artigo que vem sobre do cabeçalho</article>
</div>