html – 引导固定页眉和页脚,在流体容器中滚动体内容区域

概述令我感到惊讶的是,我没有通过Google搜索找到这个问题的简单答案,但滚动内容面板的大多数回复都无法正常工作,或者无法使用引导. 答案like this one有全页滚动条,这似乎错了. 我只是试图拥有100％的高度html和body,没有浏览器滚动条,但滚动显示在身体内容区域上.它需要使用自举菜单高度等. 到目前为止,唯一的办法似乎是工作,总之,是使用绝对的位置内容和页脚元素. html { 令我感到惊讶的是,我没有通过Google搜索找到这个问题的简单答案,但滚动内容面板的大多数回复都无法正常工作,或者无法使用引导.

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

但是这似乎是错误的方法去做,并且似乎对引导布局的负面影响.例如,如果菜单行包裹到两行,则内容区域在nav-bar div下.

有没有可以告诉我正确的方式去做这个样式,这是兼容的开箱即用的MVC Razor / bootstrap应用程序？

笔记：

>它需要与ie8起作用.
>它需要与bootstrap一起工作,所以如果Boostrap被调整(页眉/页脚大小),那么它也会自动更正.

更新：

这是一个使用Jsfiddle(包括我的最新解决方案)：

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

解决方法 添加以下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 >  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>

总结

以上是内存溢出为你收集整理的html – 引导固定页眉和页脚,在流体容器中滚动体内容区域全部内容，希望文章能够帮你解决html – 引导固定页眉和页脚,在流体容器中滚动体内容区域所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。