HTML content overlaying footer

Question

i am having trouble sorting out my layout for my website, basically the footer at the bottom is being overlayed by the content above it and i cant figure out what is causing this.

Here is the - https://jsfiddle.net/2py4tus9/4/

Thanks for your help

Here is the html

html,
body {
  height: 100%;
  width: 100%;
  min-width: 1000px;
  margin: 0px;
  padding: 0px;
  background-color: #f0f0f0;
  overflow: auto;
}
#indexWrapper {
  width: 100%;
  height: 100%;
  background-color: #9f1717;
  margin-bottom: 100px;
}
#mainContentWrapper {
  width: 100%;
  height: 100%;
  height: auto;
  /*    position: absolute;*/
  min-height: 100%;
  /*    min-height: 1000px;*/
  margin-top: -20px;
  /*    background-color: #fafafa;*/
  background-color: palevioletred;
}
/*----- Tabs -----*/

.tabs {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: greenyellow;
  display: inline-block;
}
/*----- Content of Tabs -----*/

.tab-content {
  float: left;
  height: auto;
  width: 100%;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  /*        background:#fff;*/
  background-color: blue;
}
.tab {
  display: none;
}
.tab.active {
  display: block;
}
.tabContentBox {
  width: 50%;
  height: auto;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
  height: auto;
  border-bottom: 4px solid #eee;
  padding: 30px;
}
.footerWrapper {
  width: 100%;
  height: 100px;
  background-color: gold;
}

<div id="indexWrapper">

  <div class="tabs">

    <div class="tab-content">
      <div id="tab1" class="tab active">

        <div id="mainContentWrapper">

          <div class="tabContentBox">


            <div class="tabElementBox">



              <p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
                ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
                consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>

            </div>
            <!--tabElementBox-->

            <div class="tabElementBox">



              <p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
                ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
                consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>

            </div>
            <!--tabElementBox-->





          </div>
          <!--end tabContentBox-->

        </div>
        <!--end mainContentWrapper-->
      </div>
      <!--tab-->


    </div>
    <!--end tab-content-->


  </div>
  <!--end tabs-->


  <div class="footerWrapper"></div>
  <!--end footerWrapper-->


</div>
<!-- end indexWrapper-->

Answer 1

Your body element is set to width 100% and height 100% this is makes your page align to the viewport.
So removing the height and width makes the content scale more reasonably.
This also causes the the elements to expend the content on body so that they don't overlap.
I believe this is what happened with your footer.

html,
body {
  min-width: 1000px;
  margin: 0px;
  padding: 0px;
  background-color: #f0f0f0;
  overflow: auto;
}
#indexWrapper {
  width: 100%;
  height: 100%;
  background-color: #9f1717;
  margin-bottom: 100px;
}
#mainContentWrapper {
  width: 100%;
  height: 100%;
  height: auto;
  /*    position: absolute;*/
  min-height: 100%;
  /*    min-height: 1000px;*/
  margin-top: -20px;
  /*    background-color: #fafafa;*/
  background-color: palevioletred;
}
/*----- Tabs -----*/

.tabs {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: greenyellow;
  display: inline-block;
}
/*----- Content of Tabs -----*/

.tab-content {
  float: left;
  height: auto;
  width: 100%;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  /*        background:#fff;*/
  background-color: blue;
}
.tab {
  display: none;
}
.tab.active {
  display: block;
}
.tabContentBox {
  width: 50%;
  height: auto;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
  height: auto;
  border-bottom: 4px solid #eee;
  padding: 30px;
}
.footerWrapper {
  width: 100%;
  height: 100px;
  background-color: gold;
}

<div id="indexWrapper">

  <div class="tabs">

    <div class="tab-content">
      <div id="tab1" class="tab active">

        <div id="mainContentWrapper">

          <div class="tabContentBox">


            <div class="tabElementBox">



              <p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
                ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
                consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>

            </div>
            <!--tabElementBox-->

            <div class="tabElementBox">



              <p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
                ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
                consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>

            </div>
            <!--tabElementBox-->





          </div>
          <!--end tabContentBox-->

        </div>
        <!--end mainContentWrapper-->
      </div>
      <!--tab-->


    </div>
    <!--end tab-content-->


  </div>
  <!--end tabs-->


  <div class="footerWrapper"></div>
  <!--end footerWrapper-->


</div>
<!-- end indexWrapper-->

Answer 2

Remove height:100% from your tabs class.

 .tabs {
position: relative;
width:100%;
/*height: 100%;*/
background-color: greenyellow;
display:inline-block;
}

DEMO