How to vertically center a div with respect to the remaining height - html

Question

I made a webpage with a "sticky" footer(the footer is at the bottom of content if the content is large, or at the bottom of the viewport if the content is small) by using flexbox. I am now trying to make it so the content will be at the center of the remaining height(vh - height of navbar - height of footer) if the content is small enough. Below is an image to demostrate what I just said.
Here is my code.
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container d-flex align-items-center justify-content-center h-100" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>
#div-1 {
background-color: #00ff00;
}
.full-height {
height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
The height of the content won't change, I'm just trying to support multiple screen sizes. I have encountered 2 problems by using this approach. First, it does not work on landscape mode on mobile(emulated using chrome dev tools). Second, the navbar shrinks in height.
jsfiddle is available here. You can also compare it with the original version. Adding /embedded/result/ to the end of the url will open the result in fullscreen. Thanks for helping!

Answer 1

If you change the following it will work as you asked for:
change to min-height: 100vh in the .full-height rule
remove align-items-center/h-100 and add m-auto in the id="div-1" elements class list
Do note, the <br> you had after the </nav> in the markup is invalid, so i removed it. If you want a gap there, use margin's padding's
Updated fiddle
Stack snippet
#div-1 {
background-color: #00ff00;
}
.full-height {
min-height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container d-flex justify-content-center m-auto" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>