html - Bootstrap 固定页眉和页脚在流体容器中滚动正文内容区域

Question

我很惊讶我无法通过谷歌搜索找到这个问题的简单答案，但大多数对滚动内容面板的响应要么无法正常工作，要么无法使用 Bootstrap 。

答案 like this one有整页滚动条，这似乎是错误的。

我只是想使 html 和 body 的高度为 100%，没有浏览器滚动条，但滚动仅在正文内容区域可见。它需要与 Bootstrap 菜单高度等一起运行。

到目前为止，唯一有效的方法似乎是使用绝对位置内容和页脚元素。

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
}

但这似乎是错误的处理方式，而且似乎对 Bootstrap 布局产生了负面影响。例如，如果菜单行换行为两行，则内容区域位于导航栏 div 下方。

任何人都可以告诉我处理这种样式的正确方法，它与开箱即用的 MVC Razor/Bootstrap 应用程序兼容吗？

注意事项:

• 需要兼容 IE8 以上版本。
• 它需要与 Bootstrap 配合使用，因此如果调整了 Boostrap(页眉/页脚大小)，它也会自行修正。

更新:

这是一个可以使用的 JSFiddle(包括我从下面的答案中得到的最新解决方案):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

Answer 1

添加以下 css 以禁用默认滚动:

body {
    overflow: hidden;
}

并将 #content css 更改为此，以便仅在内容主体上滚动:

#content {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
    padding: 0px 10%;
    margin-top: 60px;
}

See fiddle here.

---

编辑:

实际上，我不确定您遇到的问题是什么，因为您的 CSS 似乎可以正常工作。我只添加了 HTML 和标题 css 语句:

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #4C4;
    height: 50px;
}
footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4C4;
    height: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>