HTML & CSS Variable div height

[bczm8703]

I am trying to code a few divs to look like a column chart.
I have the following requirement

• Parent div height is 480px for desktop, mobile will be 280px
• Max data will be 100. When rendering this chart, data will be passed in, and the height of the child will be based on the data passed in. For example, if 80 is passed in, the child height should be 80% of 480px for desktop and 80% of 280px for mobile

I am thinking of doing something like having a class name like chart-data-80 for CSS to set the child div height

If possible, I do not want to use SCSS or LESS, I prefer completing this in CSS or jQuery

 

[tomliv]

How's this?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .parent{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: flex-end;
            position: relative;
            border: 1px solid black;
            width: 800px;
            height: 480px;
        }
        .child1{
            width: 150px;
            height: 80%;
            background-color: red;
        }
        .child2{
            width: 150px;
            height: 25%;
            background-color: blue;
        }
        .child3{
            width: 150px;
            height: 55%;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
</body>
</html>

 

[tomliv]

You can also use css variables in your HTML and just change the values in your HTML like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .parent{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: flex-end;
            position: relative;
            border: 1px solid black;
            width: 800px;
            height: 480px;
        }
        .child{
            /* use var from HTML and has fallback of 100%. Fallback and comma can be removed */
            height: var(--height, 100%);
            width: 150px;
        }
        .child1{
          background-color: red;
        }
        .child2{
            background-color: blue;
        }
        .child3{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="parent">
        /* adjust height value in HTML to control div heights */
        <div class="child child1" style="--height: 55%"></div>
        <div class="child child2" style="--height: 80%"></div>
        <div class="child child3" style="--height: 25%"></div>
    </div>
</body>
</html>