I'm trying to make the AG Grid fit the size of the screen dynamically e.g. laptop screen, additional monitor which is bigger. So the size of the grid needs to be dynamic There shouldn't be any white space below the grid. I have a header and footer and the grid needs to fit between these. There should be not overlay. Any idea on how to do this?
The code below works fine with a smaller screen but when the screen is bigger there is white space. Then if I change the height percentage, the grid overlays the footer on the smaller screen not the larger screen.
.grid {
@media (min-width: 0px) and (max-width: 2000px) {
height: 86%;
}
@media (min-width: 2001px) and (max-width: 6000px) {
height: 92%;
}
}
