How to make div 100% of display height when I have to exclude the Navbar

问题

One question I have a div below a navbar. I want that the div has 100% of the remaining space and add a nice padding as Frame around it. It should not be scroll able. Also I cant bind the navbar somehow because in the project its completely different component.

I try to simplify my code.

nav {
  min-height: 80px;
  background-color: blue;
}

.take-page-height {
  padding: 1.5%;
  background-color: red;
  /* added for demonstration */
}

.welcome-div {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: green;
  background-clip: border-box;
}

<meta name="viewport" content="width=device-width,initial-scale=1" />

<nav>Hello world</nav>
<div class="take-page-height">
  <div class="welcome-div">
    <div class="col-md-12 center-text">
      <div>
        <h1>Hello</h1>
      </div>
    </div>
  </div>

The question is how I can make the div 100% of remaining space.

1. is not scrollable
2. cant integrate the navbar for example in a gridsystem
3. A nice padding frame is around the container.

Thanks

回答1:

This should help you: Make a div fill the height of the remaining screen space

Basically you should use flexbox to make the div grow and fill up the rest of the page. Are you familiar with flex box? If not you can read here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

来源：https://stackoverflow.com/questions/65373908/how-to-make-div-100-of-display-height-when-i-have-to-exclude-the-navbar