KPC
Kevin Powell - Community•2mo ago
Faker

Problem with using percentage as a unit with respect to the min-height property

Hello guys, sorry to disturb you all; can someone explain why my box1 isn't appearing, it's like it doesn't have any height because when I change the height from a percentage to another unit, it works well, but not here 
<!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="styles/test.css" />
    <title>Stacking context</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>
<!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="styles/test.css" />
    <title>Stacking context</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>
*, *::after, *::before{
    box-sizing: border-box;
}

body{
    margin: 0;
    min-height: 100svh;
    min-height: 100vh;
}

.box1 {
    width: 10%;
    height: 50%;
    background-color: violet;
}

.box2 {
    width: 200px;
    height: 100px;
    background-color: hsl(240, 66%, 63%);
}

.box3 {
    width: 200px;
    height: 100px;
    background-color: hsl(0, 84%, 66%);
}
*, *::after, *::before{
    box-sizing: border-box;
}

body{
    margin: 0;
    min-height: 100svh;
    min-height: 100vh;
}

.box1 {
    width: 10%;
    height: 50%;
    background-color: violet;
}

.box2 {
    width: 200px;
    height: 100px;
    background-color: hsl(240, 66%, 63%);
}

.box3 {
    width: 200px;
    height: 100px;
    background-color: hsl(0, 84%, 66%);
}
3 Replies
13eck
13eck•2mo ago
This is one of those quirks of CSS where you need to have an explicit height on the parent for the percentage to be used. you have a min-height on your body, which for the purpose of "parent container's height" is auto. To avoid infinite loops where the height of the parent is based on the content of the children and the height of the children are based on the height of the parent…CSS just assumes any non-set height to be 0 for the purpse of children with percentage-based heights. What you can do is give .box1 an explicit height based on what you know the parent will be. The parent is min-height: 100vh;, so we can set .box1's height to 50vh. It's the same thing but you're using explicit numbers instead of percentages and CSS doesn't care.
clevermissfox
clevermissfox•2mo ago
Faker
FakerOP•2mo ago
ty !
Want results from more Discord servers?
Add your server