Whitespace on the bottom below the footer when resizing webpage - html

Question

I essentially have a table that displays data from a database. I am using bootstrap to assist the design of the website. Here is a screenshot that shows the issue: https://imgur.com/a/FV7UFhn
Here is the HTML:
http://pastie.org/p/2mPG3zE7b6AdHOuoJrMDZV
Here is the relevant CSS:
http://pastie.org/p/14nCCfRGIA4WrFLXrFqNWe
I sent them using pastie.org as they are probably too big to paste into stackoverflow

Answer 1

I recommend you use css flex for the base template of your site if it's a one dimensional array layout (e.g single colimn head, body, foot).
html,
body {
min-height: 100%;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: #eee;
flex: 0 0 50px;
}
main {
background: #aaa;
flex: 1;
}
footer {
background: #888;
flex: 0 0 100px;
}
<div class="container">
<header>
HEAD
</header>
<main>
BODY
</main>
<footer>
FOOT
</footer>
</div>
If it is a two dimensional array (e.g contains sidebars) then I recommend using css grid for the base template.
HOLY GRAIL EXAMPLE
.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
background: #eee;
grid-area: header;
}
nav {
background: #888;
grid-area: nav;
}
main {
background: #aaa;
grid-area: content;
}
aside {
background: #888;
grid-area: side;
}
footer {
background: #bbb;
grid-area: footer;
}
<div class="container">
<header>
HEAD
</header>
<nav>
NAV
</nav>
<main>
BODY
</main>
<aside>
SIDE
</aside>
<footer>
FOOT
</footer>
</div>