How to get the height of a block with text?-CodePudding

Incorrect getting of block height with text.

I'm making a popup block. The amount of text is not initially known, so using max-height: 100vh is a bad idea, because there will be a visual delay when closing the block.

there was an idea to store the height of the content in the root css variable (when the window is resized, I will overwrite the value of the variable)

I tried taking the height of the block through clientHeight, offsetHeight, scrollHeight. All of them give the height less than necessary.

My guess is that it's a font issue. If this is the problem, then I will have even more questions.

try running the code snippet I posted and click on the text. only 3 paragraphs will open, not 4 (

NO STANDARD FONT NEEDED

here is the code

let Uncoverblock = document.querySelector('.uncover-block');
let root = document.querySelector(':root');

let name = '--height-1';
let value = Uncoverblock.firstElementChild.clientHeight   'px';
root.style.setProperty(name, value);

let body = document.querySelector('body');
body.addEventListener('click', function () {
    body.classList.add('open');
});

body {
    font-family: 'Rubik Burned', cursive;
}

.block {
    max-height: 100px;
    overflow: hidden;
}

.uncover-block {
    transition-timing-function: ease-in-out;
    transition-duration: 0.5s;
}

.open .uncover-block[data-height="1"] {
    max-height: var(--height-1);
}

.block-p {
    width: 70%;
}

.p {
    padding: 0;
    line-height: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik Burned&display=swap" rel="stylesheet">
</head>
<body>
    <div  data-height="1">
        <div >
            <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim quidem sit illum. Debitis error vitae,
                eos nisi voluptatum beatae repudiandae, quidem ea esse nobis assumenda dolores perspiciatis. Nemo, quae ipsam.
            </p>
            <p >Assumenda saepe suscipit quos ipsum. Deleniti, nisi natus accusantium quis dicta itaque totam
                praesentium ea assumenda est maxime? Quae fugiat voluptatem recusandae cumque quibusdam velit eligendi corporis.
                Id, ut laudantium.</p>
            <p >Sapiente in reiciendis veritatis culpa perferendis, excepturi quis ipsam ea quibusdam incidunt ratione
                minima optio, maxime aperiam maiores expedita illum exercitationem consequuntur saepe ab aspernatur accusantium
                eveniet vero? Fugit, odit?</p>
            <p >Assumenda ipsam dignissimos doloribus, reprehenderit distinctio atque eum velit ipsum impedit? Magnam a
                quidem minima, consectetur dolorem praesentium dolores cum perspiciatis itaque, minus quas alias, illo dolorum
                adipisci? Voluptate, culpa!</p>
        </div>
    </div>
    

    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

Well it is indeed font loading issue. It can be seen when you calculate height of your block immediately on page load and in setTimeout for couple of seconds. Yes, it will be different. Because of specific font settings, line-height as example.

What i can suggest is to use javascript font loader to load your font where you will be able to perform calculations in the exact time when font was loaded. Webfontloader will be a good example https://github.com/typekit/webfontloader Or if you don't need calculations to run on page load simply move your calcultion code to click handler so it will be calculated at the time when you actually click so fonts are most likely to be downloaded.

body.addEventListener('click', function () {
    let value = Uncoverblock.firstElementChild.clientHeight   'px';
    root.style.setProperty(name, value);
    body.classList.add('open');
});