Question

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

答案like this one有完整页面滚动条，这似乎不对。

我只是尝试使用没有浏览器滚动条的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布局产生负面影响。例如，如果菜单行换行为两行，则内容区域位于导航栏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语句：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

另一种选择是使用flexbox。

虽然IE8和IE9不支持，但您可以考虑：

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

尽管需要一些额外的浏览器特定样式前缀才能获得完整的跨浏览器支持，但您可以在this fiddle和以下代码段中看到基本用法：

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>

Answer 3

在我得到更好的选择之前，这是我能解决的最“引导”的答案：

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

我已经切换到使用LESS并包含Bootstrap Source NuGet包以确保兼容性（通过让我访问bootstrap variables.less文件：

_layout.cshtml母版页

将页脚移到body-content容器
在页脚上使用boostrap的navbar-fixed-bottom
将<hr/>放在页脚之前（现在是多余的）

相关网页HTML：

<div class="container-fluid body-content">
    @RenderBody()
</div>
<footer class="navbar-fixed-bottom">
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>

在Site.less

将HTML和BODY高度设置为100％
将BODY overflow设为hidden
将body-content div position设为absolute
将body-content div top设置为@navbar-height，而不是硬连线值
将body-content div bottom设为30px。
将body-content div left和right设为0
将body-content div overflow-y设为auto

<强> Site.less

html {
    height: 100%;

    body {
        height: 100%;
        overflow: hidden;

        .container-fluid.body-content {
            position: absolute;
            top: @navbar-height;
            bottom: 30px;
            right: 0;
            left: 0;
            overflow-y: auto;
        }
    }
}

剩下的问题是bootstrap中似乎没有footer height的定义变量。如果有人打电话告诉我，如果在Bootstrap中定义了一个神奇的30px变量，我会很感激。

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

说明：

更新

3 个答案: