Search code examples
htmlcssgridw3.css

Make two w3-rows to fit into a specific 80vh in any resolution

I use the grid from w3-css. My layout has two columns. In total they shall be 80vh in height. My first column has two rows which are separated by a margin of 16px.

Problem: The lower row has a minimal vh as well as the upper row. But they have to have the margin of 16px. If I resize my screen the lower row shifts outwards the 80vh. Is it possible to fix the lower at the 80vh "border" ? So that it does not shift while resizing? I like the grid layout and wanna stick to it. Just if there is no way I would change it to be flexible in any resolution.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>Equal Heights</title>
    
</head>
<body>
    <div class="w3-main">
        <div class="w3-row" style="background-color:red; height: 80vh;">
            <div class="w3-col m6 l6" style="background-color:dimgrey;">
                <div class="w3-row">
                    <div class="w3-row" style="background-color:aliceblue; height: 34vh;">upper-row</div>
                    <div class="w3-row" style="background-color:lightblue; margin-top: 16px">
                        <div class="w3-panel w3-card-2 w3-container" style="Height:40vh; background-color:lightgreen;">lower-row</div>
                    </div>
                </div>
                
            </div>
            <div class="w3-col m6 l6" style="background-color:grey;"></div>

        </div>
        
    </div>
</body>
</html>

I tried making a flex grid. In that case each row had the same height and the margin fit into it. But I had to make more adaption regarding different media resolutions.

My problem is that I cannot change the usage of vh. Unfortunately it's a bug by the image generator for the svg images (plotly)

I further tried to calculate the lower vh like height: calc(40vh +/- n) or to calculate the margin of 16px into vh.

Solution

  • Try this approach:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>Equal Heights</title>
</head>
<body>
    <div class="w3-main">
        <div class="w3-row" style="background-color: red; height: 80vh;">
            <div class="w3-col m6 l6" style="background-color: dimgrey;">
                <div class="w3-row">
                    <div class="w3-row" style="background-color: aliceblue; height: calc(34vh - 8px);">upper-row</div>
                    <div class="w3-row" style="background-color: lightblue; margin-top: 16px;">
                        <div class="w3-panel w3-card-2 w3-container" style="height: calc(40vh - 8px); background-color: lightgreen;">lower-row</div>
                    </div>
                </div>
            </div>
            <div class="w3-col m6 l6" style="background-color: grey;"></div>
        </div>
    </div>
</body>
</html>

    For the upper row, I set the height to calc(34vh - 8px) to account for the 16px margin (8px on top and 8px on the bottom).

    For the lower row, I set the height to calc(40vh - 8px) similarly. This should keep the lower row fixed within the 80vh boundary while maintaining the desired margin.