流体容器中带有滚动体内容区域的自举式固定页眉和页脚

问题描述

令我惊讶的是，我无法通过Google搜索找到一个简单的答案来解决这个问题，但是大多数对内容面板滚动的响应要么无法正常工作，要么无法与Bootstrap一起工作.

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 one have full page scroll-bars, which seems wrong.

我只是试图将高度html和body设置为100％，而没有浏览器滚动条，但是滚动仅在正文内容区域可见.它需要与引导程序菜单高度等保持一致.

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

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

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

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

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.

请问有没有与现成的MVC Razor/Bootstrap应用程序兼容的样式的正确方法?

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?

• 它需要从IE8开始使用.
• 它需要与Bootstrap配合使用，因此，如果调整了Boostrap(页眉/页脚大小)，它也会进行自我校正.

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

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

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

推荐答案

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

Add the following css to disable the default scroll:

body {
    overflow: hidden;
}

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

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

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

在此处查看小提琴.

实际上，我不确定您面临的问题是什么，因为您的CSS似乎正在工作.我只添加了HTML和标头css语句:

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:

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>

这篇关于流体容器中带有滚动体内容区域的自举式固定页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！