Q:

HTML and Body is not 100% height

I have an side divs and a two center divs, The center div is for scrolling other divs that are inside of it. Problem is that page is getting off page
Is it problem with my position? And how can I fix this?

html,
body {
  height: 100%
}

body {
  margin: 0px;
  font-family: repub;
  color: white;
}

.container-main-left {
  float: left;
  width: 15%;
  min-height: 100%;
  background-color: red;
  display: inline-block;
  line-height: 300%;
}

.container-main-right {
  float: right;
  width: 15%;
  min-height: 100%;
  background-color: red;
  display: inline-block;
  line-height: 300%;
}

.container-main-topheader {
  display: block;
  float: none;
  height: 45px;
  background: #F00;
  background-color: blue;
}

.container-main-fixedscroll {
  height: 100%;
  overflow: auto;
}

.container-main-fixedstore {
  height: 50%;
  float: none;
  width: 100%;
  background-color: aquamarine;
  border-bottom: 2px solid;
}
<div class="container-main-left"></div>
<div class="container-main-right"></div>
<div class="container-main-topheader"></div>
<div class="container-main-fixedscroll">
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
</div>

Link to this fiddle: https://jsfiddle.net/yc9ptkzx/

A:

.container-main-fixedscroll needs to be height: calc(100% - 45px) because of the height of your header

html,
body {
  height: 100%
}

body {
  margin: 0px;
  font-family: repub;
  color: white;
}

.container-main-left {
  float: left;
  width: 15%;
  min-height: 100%;
  background-color: red;
  display: inline-block;
  line-height: 300%;
}

.container-main-right {
  float: right;
  width: 15%;
  min-height: 100%;
  background-color: red;
  display: inline-block;
  line-height: 300%;
}

.container-main-topheader {
  display: block;
  float: none;
  height: 45px;
  background: #F00;
  background-color: blue;
}

.container-main-fixedscroll {
  height: calc(100% - 45px);
  overflow: auto;
}

.container-main-fixedstore {
  height: 50%;
  float: none;
  width: 100%;
  background-color: aquamarine;
  border-bottom: 2px solid;
}
<div class="container-main-left"></div>
<div class="container-main-right"></div>
<div class="container-main-topheader"></div>
<div class="container-main-fixedscroll">
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
  <div class="container-main-fixedstore">m
    <div class="container-main-fixedstore-imageleft">a</div>
    <div class="container-main-fixedstore-imageright">as</div>
    <div class="container-main-fixedstore-descriptionleft">asd</div>
    <div class="container-main-fixedstore-descriptionright">asdf</div>
  </div>
</div>

Updated Fiddle

