2

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

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Severin Koch
  • 59
  • 7
  • https://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486#25098486 ... flex-grow and min-height or height + flex is missing on body grid can do it too. position:relative has no use here ;) to include padding and size, use box-sizing – G-Cyrillus Dec 19 '20 at 20:08
  • 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) – Roy Dec 19 '20 at 20:12
  • The answer that I found. Need a body or some sort of element that contains both header and the rest. I want only from the perspective of the container to fill up the remaining space. And not that I have to frame all elements. Because my structure is already to complex. – Severin Koch Dec 19 '20 at 20:37

1 Answers1

0

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

Antfere
  • 90
  • 6
  • 4
    this deserves to be a comment. devellop this answer with the source to make a working snippet at least ;) or turn it into a comment ; – G-Cyrillus Dec 19 '20 at 20:11
  • 1
    thanks but, this does not exclude the header. I even found that maybe a javascript solution is possible so not sure what to do. – Severin Koch Dec 19 '20 at 21:41