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

Question

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

像这样的答案有完整的页面滚动条,这似乎是错误的.

我只是试图拥有100%的高度html并且body没有浏览器滚动条,但仅在主体内容区域上滚动可见.它需要与引导菜单高度等行为.

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

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布局产生了负面影响.例如,如果菜单行换行到两行,则内容区域位于nav-bar div下.

请问有没有正确的方法来解决这个样式,这与开箱即用的MVC Razor/Bootstrap应用程序兼容？

笔记:

• 它需要与IE8一起使用.
• 它需要使用Bootstrap,因此如果调整Boostrap(页眉/页脚大小),它也会自行纠正.

更新:

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

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

Answer 1

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

body {
    overflow: hidden;
}

并将#contentcss 更改为仅在内容正文上进行滚动:

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

请看这里的小提琴.

编辑:

实际上,我不确定你面临的问题是什么,因为你的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>

Answer 2

另一种选择是使用flexbox.

虽然IE8和IE9不支持,但您可以考虑:

• 不关心那些旧的IE版本
• 提供后备
• 使用polyfill

尽管完整的跨浏览器支持需要一些额外的特定于浏览器的样式前缀,但您可以在此小提琴和以下代码段中看到基本用法:

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html body .container-fluid.body-content {
  width: 100%;
  overflow-y: auto;
}
header {
    background-color: #4C4;
    min-height: 50px;
    width: 100%;
}
footer {
    background-color: #4C4;
    min-height: 30px;
    width: 100%;
}

<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>