Make top div 20% and bottom div 80% of parent

Question

I have React app that would like to make 20% app bar on top and 80% or the rest of the height fulfill with parent height.

<div>
    //Like to make 20% height
    <div>
        <p>App bar</p>
    </div>
    //Like to make 80% height
    <div>
        <div>Content A</div>
        <div>Content B</div>
        <div>Content C</div>
    </div>
</div>

score -1 · Answer 1 · answered Nov 07 '22 at 09:58

Flex box makes it easiler than ever to scale the dom to fill the rest space.

<div class="parent">
    <div class="app-bar">
        <p>App bar</p>
    </div>
    <div class="rest">
        <div>Content A</div>
        <div>Content B</div>
        <div>Content C</div>
    </div>
</div>


.parent {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-flow: column;
  background-color: #cccccc;
  border: 1 solid #aaaaaa;
}

.app-bar {
  height: 20%;
  background-color: #aaaaaa;
}

.rest {
  flex: 1 1 auto;
  background-color: yellow;
  
}

@xpcrtsAKARithisak yes, you are right. I added more code like the bg color and border, just want to clarify the boundaries of the different div. Hope someone else like to help. — Pengson, Nov 08 '22 at 08:04

score -2 · Answer 2 · answered Nov 07 '22 at 09:48

One of the solution is to try this:

<div style={{display:"flex", flexDirection:"column"}}>
    <div style={{height: "20vh"}}>
        <p>App bar</p>
    </div>
    <div style={{height: "80vh", border:"1px solid blue"}}>
        <div>Content A</div>
        <div>Content B</div>
        <div>Content C</div>
    </div>
</div>

Make top div 20% and bottom div 80% of parent

2 Answers2

Linked