Question 42883 in Html Question posted in
Some basic documentation can be found here.

Why is the div element not spanning the parent's height? – Html

I have the following mark up,

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        min-height: 98vh;
        color: white;
        background-color: black;
        border: 1px solid green;
      }
      #root {
        min-height: 100%;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="root">Testing.</div>
  </body>
</html>

The div with #root id has body as its parent which has a height of 98vh. The div with #root id has a height of 100% but it is not getting the 100 percent height of body. What am I missing here?

Tags:

3

Answers


  1. 0

    Just use height instead of min-height.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        height: 98vh;
        color: white;
        background-color: black;
        border: 1px solid green;
      }
      #root {
        height: 100%;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="root">Testing.</div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    Try inset:0 to let the div relative to its parent.

    body {
  min-height: 98vh;
  color: white;
  background-color: black;
  border: 1px solid green;
  position: relative;
}

#root {
  position: absolute;
  inset: 0;
  border: 1px solid red;
}
    <div id="root">Testing.</div>
    Login or Signup to reply.
  3. 0

    There are multiple ways to get the full height of a child element based on the parent element.

    Solution 1

    Just use min-height: inherit; in child element css, it’s use parent’s min-height value.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
        margin:0px;
        padding:0px;
      }
      body {
        min-height: 98vh;
        color: white;
        background-color: black;
        border: 1px solid green;
      }
      #root {
        min-height: inherit;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="root">Testing.</div>
  </body>
</html>

    Solution 2

    You can use height:100% in chid element if patent have also fix height value.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
        margin:0px;
        padding:0px;
      }
      body {
        height: 98vh;
        color: white;
        background-color: black;
        border: 1px solid green;
      }
      #root {
        height: 100%;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="root">Testing.</div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search