[Solved] HTML and Body is not 100% height [closed]

by


.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

5

solved HTML and Body is not 100% height [closed]