How to fix height in divs to show 100% down

HTML-CSS
1

image
image1366×739 13.6 KB 

<body>
    <div class="container">
        <div class="left">
            1

        </div>
        <div class="right">
            2
        </div>
    </div>
</body>

.container {
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-template-rows: auto;
    max-width: 2000px;
    height: 100%;
}

.left {
    background-color: aqua;
}

.right {
    background-color: blueviolet;
}```
2

Use min-height: 100vh instead.

Percentages work on values if you do not have a height or only have the height of the content then that is the value 100% will evaluate to.

If you do want to use percentages you have to propagate the height down starting with the root, i.e. html, then the body, then the child of the body, then the child of the child, and so on. I don’t suggest doing so as we have the vh unit.

html,
body {
  height: 100%;
}

.container {
  height: 100%;
}

.left {
  height: 100%;
  background-color: aqua;
}

.right {
  height: 100%;
  background-color: blueviolet;
}
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.