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

Question

提问by Gone Coding

I was surprised I could not find a simple answer to this problem by Googling, but most responses to scrolling content panels either did not work properly, or did not work with bootstrap.

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

Answers like this onehave full page scroll-bars, which seems wrong.

像这样的答案有整页滚动条，这似乎是错误的。

I am simply trying to have 100% height htmland bodywith no browser scrollbar, but scrolling visible on the body content area only. It needs to behave with bootstrap menu heights etc.

我只是想拥有 100% 的高度html并且body没有浏览器滚动条，但滚动仅在正文内容区域可见。它需要与引导菜单高度等行为。

So far the only way seems to work, at all, is using absolutely position content and footers elements.

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

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

But this just seems the wrong way to go about it and seems to impact Bootstrap layouts negatively. For instance, if the menu line wraps to two lines, the content area goes under the nav-bar div.

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

Can any please tell me the correct way to go about this styling, that is compatible with an out-of-the-box MVC Razor/Bootstrap application?

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

Notes:

笔记：

It needs to work with IE8 onwards.
It needs to work with Bootstrap, so if Boostrap is adjusted (header/footer sizes) then it will correct itself too.

它需要与 IE8 一起使用。
它需要与 Bootstrap 一起使用，所以如果 Boostrap 被调整（页眉/页脚大小），那么它也会自我纠正。

Update:

更新：

Here is a JSFiddle to work with (including my latest solution from answer below):

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

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

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

Answer 1

回答by falsarella

Add the following css to disable the default scroll:

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

body {
    overflow: hidden;
}

And change the #contentcss to this to make the scroll only on content body:

并将#contentcss更改为此以仅在内容正文上滚动：

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

See fiddle here.

请参阅此处的小提琴。

Edit:

编辑：

Actually, I'm not sure what was the issue you were facing, since it seems that your css is working. I have only added the HTML and the header css statement:

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

回答by falsarella

Another option would be using flexbox.

另一种选择是使用flexbox。

While it's not supported by IE8 and IE9, you could consider:

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

Not minding about those old IE versions
Providing a fallback
Using a polyfill

不介意那些旧的 IE 版本
提供后备
使用polyfill

Despite some additional browser-specific style prefixing would be necessary for full cross-browser support, you can see the basic usage either on this fiddleand on the following snippet:

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

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

回答by Gone Coding

Until I get a better option, this is the most "bootstrappy" answer I can work out:

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

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

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

I have switched to using LESS and including the Bootstrap Source NuGet package to ensure compatibility (by giving me access to the bootstrap variables.lessfile:

我已改用 LESS 并包含 Bootstrap Source NuGet 包以确保兼容性（通过让我访问引导variables.less文件：

in _layout.cshtml master page

在 _layout.cshtml 母版页中

Move footer outside the body-contentcontainer
Use boostrap's navbar-fixed-bottomon the footer
Drop the <hr/>before the footer (as now redundant)

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

Relevant page HTML:

相关页面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>

In Site.less

在 Site.less 中

Set HTMLand BODYheights to 100%
Set BODYoverflowto hidden
Set body-contentdiv positionto absolute
Set body-contentdiv topto @navbar-heightinstead of hard-wiring value
Set body-contentdiv bottomto 30px.
Set body-contentdiv leftand rightto 0
Set body-contentdiv overflow-yto auto

设置HTML和BODY高度为 100%
设置BODYoverflow为hidden
将body-contentdiv设置position为absolute
将body-contentdiv设置top为@navbar-height而不是硬接线值
将body-contentdiv设置bottom为30px.
将body-contentdivleft和设置right为 0
将body-contentdiv设置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;
        }
    }
}

The remaining problem is there seems to be no defining variable for the footer heightin bootstrap. If someone call tell me if there is a magic 30px variable defined in Bootstrap I would appreciate it.

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

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

提问by Gone Coding

Notes:

笔记：

Update:

更新：

回答by falsarella

回答by falsarella

回答by Gone Coding

相关推荐

最近更新

标签

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

提问by Gone Coding

Notes:

笔记：

Update:

更新：

回答by falsarella

回答by falsarella

回答by Gone Coding

相关推荐

关于 HTML 标签的“For”属性

Html HTML5 <video> 标签：没有 Flash 的 RTMP 流媒体？

HTML Body 在 Chrome 的开发者工具中显示 cz-shortcut-listen="true"？

Html 浏览和上传文件按钮上的图像

相关推荐

最近更新

标签