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 wich 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 hight 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.
Blueberry Cake is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.