Whitespace on the bottom below the footer when resizing webpage

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

DreamTeK · Answer

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;
}


  
    HEAD
  

  
    BODY
  

  
    FOOT

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;
}


  
    HEAD
  

  
    NAV
  

  
    BODY
  

  
    SIDE
  

  
    FOOT

Whitespace on the bottom below the footer when resizing webpage

1 Answers