i need help on how to make a div occupy 100% of parent div verticallt

Question

i need a solution guys, i want the two boxes in pink and white to have same height as its parent container in blue box (that is to stop where that blue box stopped) without depending on the content of the div in pink and white boxes. here is my fiddle code https://jsfiddle.net/dcq4bufa/3/

my HTML CODE

<head>
  <title>eco</title>
</head>
<body>
  <header class="header">
    <ul class="nav">
      <li class="nav-items">HOME</li>
      <li class="nav-items">APP</li>
      <li class="nav-items">STORE</li>
   </ul>

   <div class="home">
     <div class="home__right">
       <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nemo 
     aliquid saepe tempora doloribus dicta quas aperiam, eius odio ipsa culpa ipsam rerum quam vero 
        itaque, recusandae sint perferendis ipsum.</p>
      <h1 class="home__right--sub"> tenetur quidem ducimus quod odit totam, dolor</h1> 
     </div>
     <home class="home__left">
       <h1 class="paragraph">Lorem ipsum dolor sit amet, consectetur ad</h1>
     </home>
   </div>
  </header>
</body>

Probably this question is doubled with: https://stackoverflow.com/questions/1098219/how-to-make-child-divs-always-fit-inside-parent-div — Orzel94, May 25 '20 at 12:25
It covered beyond the height and went further to cover 100vh. — Anyaebosi Uchenna, May 25 '20 at 12:39
Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Johnathan Barrett, May 25 '20 at 12:58

score 0 · Answer 1 · answered May 25 '20 at 12:54

First you must outline the height of the parent container(blue),then set the two children elements(pink and white)height of 100% since they are in a container that is 100 of your device height.Try this:

.home {
  display: flex;
  height:100vh;

  &__right {
    background-color: pink;
    height:100%;
    flex-basis: 50;

  }

  &__left {
    background-color: white;
    height:100%;
    flex: 1;

  }

}

You can adjust the height of .home if you are not comfortable with the overflow

score 0 · Answer 2 · answered May 25 '20 at 13:01

0

If you can use flexbox, you may do the following:

.header {
  height: 80vh;
  background-color: blue;
  /* Add flexbox */
  display: flex;
  flex-direction: column;
}

.home {
  display: flex;
  flex: 1; /* Set flex-grow: 1 */
  ...

answered May 25 '20 at 13:01

yinsweet

2,823
1
9
21

i need help on how to make a div occupy 100% of parent div verticallt

2 Answers2