Why parent and children divs have the same height

Question

I created an empty react project and I only added a materializecss for styles.

<div className="App">
    <header>
        <nav/>
    </header>

    <div className="row category__list" />

    <footer className="page-footer">
        <div className="footer-copyright" />
    </footer>
</div>

I added a styles for my blocks.

.App {
  height: 100vh;
}

.category__list {
  margin: 0;
  height: 100%;
}

.page-footer {
    padding: 0;
}

Why my block App and the block category__list have the same height? And I have a scroll and my footer not see without use the scroll.

As I see it, the category__list block should set all free space and my footer haven't to be outside the display.

For example http://jsfiddle.net/MegaRoks/g4ruz53p/10/

height in % defines the height in percent of the parent block. You are defining the height of child div as 100%, that means it will have same height as that of parent div. To create div to fill free space, refer this link: https://stackoverflow.com/questions/10228280/how-to-make-div-height-100-between-header-and-footer — Akshay, Sep 26 '20 at 12:19

score 2 · Accepted Answer · answered Sep 26 '20 at 12:15

That's because you have given your .App a full screen height (100vh) and made your category__list again 100% height. So your footer resides below it. This is why you get the scroll.

If you need your app to be full screen height then maybe this will help you.

    .App {
      height: 100vh;
    }

    .category__list {
      margin: 0;
      height: calc(100% - 150px); /* footer height reduced from full height*/
    }

    .page-footer {
        padding: 0;
        height: 150px;
    }

Why parent and children divs have the same height

1 Answers1