1

The body takes 100vh but the main section doesn't take 100% of it... I have tried to take off the grid to see if it had an impact but it seems than it doesn't. Do you know what is the problem ?

html {
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  padding: 10px clamp(10px, 2vw ,20px);
  font-size: 3.1rem;
  font-family: Lato, sans-serif;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.7);
}

main {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "player1 player2";
  width: 90vw;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.149);
}
Johan Testas
  • 53
  • 6
  • It's because you've set the body to min-height rather than height. Or in main set min-height to inherit. That also works as it inherits the parents height. – Adam Oct 05 '22 at 08:41
  • Thank you both of your solutions worked ! But actually an other question was post on this subject... https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height . The reason is "This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property" – Johan Testas Oct 06 '22 at 12:56
  • That's interesting. Thanks for sharing. My stackoverflow-fu is clearly lacking. – Adam Oct 06 '22 at 15:50

0 Answers0