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.
- is not scrollable
- cant integrate the navbar for example in a gridsystem
- A nice padding frame is around the container.
Thanks