CODEWITHSUNDEEP
htmlcss
Surendra
Surendra

Reputation: 208

How to expand height of child based on parent parent

<body>
  <section class="container">
    <div class="child">
      //content goeshere
    </div>
  </section>
<body>

This is my html code. I need 'child' class div's height should be based on body tag. How can I achieve this through css.

Upvotes: 1

Views: 66

Answers (2)

Banzay
Banzay

Reputation: 9470

If you want .child to cover whole height of screen, then you need to

  1. Set body height equal 100vh - vh is viewport height units, 1vh = 1% of window height

  2. Set container height to 100% of its parent, it means body

  3. Set child height to 100% of its parent, it means container

body {
  height: 100vh;
}
.container {
    height: 100%;
} 
.child {
    height: 100%;
    background: orange;
}
<body>
  <section class="container">
    <div class="child">
      //content goeshere
    </div>
  </section>
</body>

Here is one more solution where height of child don't bound to container height. (backgrounds and different widths and heights added for better look)

body {
     position: absolute;
     width: 80%;
     height: 80%;
     border: 1px solid green;
     background: lightgreen;
}
.container {
    width: 20%;
    height: 100px;
    background: teal;
} 
.child {
    position: absolute;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
    background: orange;
}
<body>
    <section class="container">
     Before content
    <div class="child">
      //content goeshere
    </div>
    After content
  </section>
</body>

Upvotes: 1

Salmaan C
Salmaan C

Reputation: 301

use same class name........

eg :

<body>
  <section class="child">
    <div class="child">
      //content goeshere
    </div>
  </section>
<body>

Upvotes: 0

Related Questions