0

having given the html and body elements a height: 100% height,

and also having given a child element of body, say, main a height: 100% height,

it refuses to take the height.

but if a child element of main is given a height: 50% height, it will work given main has a set height.

Why does this work for here and not for the latter?

Edit*

here's a working code

html,
body {
  height: 100%;
}

main {
  height: 100%;
  background: red;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Height</title>
</head>

<body>
  <main> </main>
</body>

</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Estif
  • 55
  • 6
  • 2
    share a working example – Temani Afif Jan 22 '22 at 20:52
  • 1
    Please add your code. – Navid Jan 22 '22 at 21:08
  • for height in % the parent element needs a defined height. By default the height of an element is calculated to fit content. As such the child elements dont know what a height in % means. – tacoshy Jan 22 '22 at 21:14
  • @TemaniAfif added – Estif Jan 23 '22 at 08:10
  • and what's the issue? your code works fine – Temani Afif Jan 23 '22 at 08:13
  • @tacoshy I understand that. The body element receives it's height from the html element and it from the veiwport. which is why I'm confused the main element isn't taking height from the body despite it having height. (this also wont work if the body element is given any fixed/ vh height) – Estif Jan 23 '22 at 08:14
  • @Estif: when you click the "run snippet" button in your post you can see it works as expected, `main` gets stretched to the full height of the viewport. (plus the body padding which you forgot to remove and which due to a box sizing default of `content-box` _adds_ to the 100%) So, what is the issue exactly? It's a bit unclear. – CherryDT Jan 23 '22 at 08:16
  • @TemaniAfif I seems you are correct. The only explanation is React does something to prevent main from taking the height. – Estif Jan 23 '22 at 08:25
  • @CherryDT y'all are right. it works for pure html + css. So like I said, must be React doing something... – Estif Jan 23 '22 at 08:27
  • 1
    I guess it adds an element that is not on 100% height between the body and the main tag – CherryDT Jan 23 '22 at 08:29

0 Answers0