The text pops out of the div in height. How to decide?

Question

css

When zooming in (or when increasing the amount of text), it mercilessly rushes right through the div block down in height. Tried to change

height:100%

on the

height:auto

But in this case, the block moves down. And if you move it up margin-top:-5em; , then when you increase the upper half of the block is hidden outside the screen.
https://codepen.io/Fargoth/pen/YjQgOv

Answer 1

Understood nothing! Block you from the top to the bottom of the screen. You increase the size of the text by scaling (the block cannot increase, but the text increases) and it is quite logical that at some point the text starts to fall out of the block. What do you need to get in the end? Prevent scaling or hide pop-up text?

Answer 2

I advise you to abandon the absolute, it was not invented in order to position the entire page absolutely.

Answer 3

You need to put the top image as a background (like the body tag), and remove the absolute positioning of the .pageb block, display: inline-block , height and z-index , and instead center the div with margin: 0 auto.
I cannot keep silent about the fact that here you need to remove the span and add this class immediately to h1:

<span class="nptitle">
  <h1>Волшебный заголовок новости</h1>
</span>

to make it happen

<h1 class="nptitle">Волшебный заголовок новости</h1>

span inside the header can be set, but vice versa - do not https://www.w3.org/TR/html4/struct/global.html#h-7.5.5
I recommend using the Bootstrap library for layout https://getbootstrap.com/
You can also learn the best layout practices on the w3schools website, for example, about the grid: https://www.w3schools.com/w3css/w3css_layout.asp
Plus be sure to read about the semantics of html.

Answer 4

Disgusting layout. Look at examples of layouts and try to repeat.
See also the purpose of html tags.

Answer 5

Collected all necessary changes in this sandbox .
Everything is fine, the scaling range in width is from 350px.