Div容器/机身全高

Question

我有这个布局：

HEADER

DIV#1 | DIV#2

FOOTER

我希望DIV#1和DIV#2成为页面的完整高度。

我尝试将DIV#1的高度设置为100％，将body,html高度设置为100％。

结果如下：

正如你所看到的，DIV＃1和DIV＃2不是全高（直到页脚..）

这是HTML：

<div class="container">

    <div class="col-xs-2" id="sidemenu" style="background: red;">
    sidemenu div#1<br />
    sidemenu div#1
    </div>

    <div class="col-xs-10" style="background: black;">
    content div#2<br />
    content div#2
    </div>


</div><!--/container-->

和css ..

  #sidemenu{
        border-right: 3px solid #F4F4F4;
        height: 100%;
    }
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
      font-family: 'Open Sans', sans-serif !important;
      height: 100%;
    }
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 70px;
  font-size: 12px;
  font-weight: 100;
    background-color: #e5ecf1;
    border-top: 1px solid rgba(0,0,0,.08);
    color: #7f8e99;
    padding: 30px 50px;
}

Answer 1

您可以position: absolute使用bottom: 0;将div拉到最高点。

Answer 2

您的布局应该是：

<headerdiv with specific height></headerdiv>
<sidediv with specific height></sidediv>
<footerdiv with specific height></footerdiv>

Answer 3

第一件事是拥有html＆amp;身体@ 100％身高。然后，你需要制作一个你希望拥有一个设定高度的元素的包装，达到这个高度和高度。为元素分配box-size:border-box;和100％高度。

根据你的例子，这样的事情：

<div class="container">

<div class="col-xs-2 fh" id="sidemenu" style="background: red;">
sidemenu div#1<br />
sidemenu div#1
</div>

<div class="col-xs-10 fh" style="background: black;">
content div#2<br />
content div#2
</div>


</div><!--/container-->

和它的css

html, body {height:100%}
.container {height:100%;box-size:border-box;}
.fh {box-size:border-box;height:100%}
#sidemenu{
        border-right: 3px solid #F4F4F4;
        height: 100%;
    }
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
      font-family: 'Open Sans', sans-serif !important;
      height: 100%;
    }
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 70px;
  font-size: 12px;
  font-weight: 100;
    background-color: #e5ecf1;
    border-top: 1px solid rgba(0,0,0,.08);
    color: #7f8e99;
    padding: 30px 50px;
}

和a link看到它正常工作