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

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

CodePudding user response：

Try the following:

#maincontentlist {
    min-height: 80vh;
}

.mainfooter {
    height: 20vh;
}

CodePudding user response：

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 >
  <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 >
  <header>
    HEAD
  </header>

  <nav>
    NAV
  </nav>

  <main>
    BODY
  </main>

  <aside>
    SIDE
  </aside>

  <footer>
    FOOT
  </footer>
</div>