layout example 2

by ShaCP

HTML

<div id="root">
    <div class="main-container i-fill-up-the-remaining-height">
      <div class="nav sub-container">
        <p class="nav-item">Nav item</p>
        <p class="nav-item">Nav item</p>
      </div>
      <div class="content-between-nav-and-footer i-fill-up-the-remaining-height">
        <div class="table-nav">
          <p class="nav-item table-nav-item">Nav item</p>
        </div>
        <div class="table-container">
          <div class="table">
            Table
          </div>
        </div>
      </div>
    </div>
    <footer>Footer</footer>
  </div>

CSS

* {
  /* border: 1px solid blue; */
  box-sizing: border-box;
}

#root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  text-align: center;
}

html {
  height: 100%;
  font-size: 2rem;
  text-align: center;
}

.i-fill-up-the-remaining-height {
  min-height: 0%;

  /* you can use min-height: 0%
  or height: 0% and flex: 1;. The
  first option in some cases will not
  extend to the bottom unless the 
  content extends it to it, which is 
  probably fine in most cases. */

  /* height: 0%; */
  flex: 1;
  background-color: yellow;
  display: flex;
  flex-direction: column;

  /* overflow: auto; */
}

.main-container {
  /* height: 0%;
  flex: 1; 
  the combo of these two is interchangeable
  with min-height: 0;
  In some cases, min-height: 0 will
  not extend the element all the way down
  unless there's content to push it down,
  , which is probably fine in most cases */
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: lightpink;
}

.sub-container {
  /* empty */
}

.nav {
  background-color: lightgreen;
  text-align: left;
}

.nav-item {
  margin: 0;
  width: fit-content;
}


/* one solution to keep table-nav always
vislble. I could probably do the same
with .nav */

/* .table-nav {
  position: sticky;
  top: 0;
  background-color: aqua;
} */

.table-nav {
  background-color: aqua;
}

.table-nav-item {
  margin: auto;
}

.table-container {
  min-height: 0%;
  overflow: auto;
  flex: 1;
  background-color: gray;
}

.table {
  /* this is to simulate
  a table (or any content)
  that overflows */
height: 1000px;
}

footer {
  background-color: lightskyblue;
  width: 100%;
}

/* the setup above makes it so that the footer
is always visible */

/* the below changes to #root make it so that the
footer will always be hidden and you have to scroll
down to see it. */

/* #root {
  display: initial;
} */

/* make the window smaller and see how it only
scroll once the content...