css - 如何在不考虑页脚的情况下设置 HTML 页面的高度？

Question

我想在下载文件时像 Google Chrome 那样省略页面高度的页脚。我的页面如下所示:

我想避免像这样滚动:

这是我的页脚代码:

 <footer class="tr-emulate">
      <div class="float-left" style="margin-left: 5px; padding-top: 8px;">
          <button class="k-button" onclick="javascript:document.getElementById('logoutForm').submit();">Cerrar sesión: @User.Identity.Name</button>
      </div>
      <div class="float-right" style="margin-right: 5px; padding-top: 12px;">&copy; @DateTime.Now.Year - DirecTV  &nbsp;</div>
 </footer>

这是标签的 CSS 样式:

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    text-align: left;
    width: 100%;
    bottom: 0;
    position: fixed;
    height: 37px;
}

我该怎么做？

Answer 1

这会让您走上正确的道路:

FIDDLE

HTML:

<div id="wrap">
    <div id="content"></div>
</div>
<footer></footer>

CSS:

body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#wrap{
    height:90%;
    width:100%;
    overflow:auto;
}
#content{
    height:300%;
    width:100%;
    background:green;
}

footer{
    width:100%;
    height:10%;
    position:fixed;
    bottom:0;
    left:0;
    background:red;
}