HTML和Body不是100％的高度

时间：2017-04-18 13:07:05

标签： html css

我有一个div div和两个中心div，中心div用于滚动其中的其他div。问题是页面正在下页

我的职位有问题吗？我该如何解决这个问题？

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

链接到这个小提琴：https://jsfiddle.net/yc9ptkzx/

2 个答案:

答案 0 :(得分：2)

由于标题的高度

，{p> .container-main-fixedscroll需要height: calc(100% - 45px)

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

Updated Fiddle

答案 1 :(得分：0)

请替换

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

与

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

因为

中心固定内容高度应等于总高度（100％） - 标题高度（45px）

<强> Fiddle

相关问题
最新问题