令我感到惊讶的是,我没有通过Google搜索找到这个问题的简单答案,但滚动内容面板的大多数回复都无法正常工作,或者无法使用引导.
答案like this one有全页滚动条,这似乎错了.
我只是试图拥有100％的高度html和body,没有浏览器滚动条,但滚动显示在身体内容区域上.它需要使用自举菜单高度等.
到目前为止,唯一的办法似乎是工作,总之,是使用绝对的位置内容和页脚元素.
@H_502_8@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被调整(页眉/页脚大小),那么它也会自动更正.
更新：
解决方法
添加以下css以禁用默认滚动条：
@H_502_8@body {
overflow: hidden;
}
并将#content css更改为仅在内容主体上滚动：
@H_502_8@#content { max-height: calc(100% - 120px); overflow-y: scroll; padding: 0px 10%; margin-top: 60px; }编辑：
其实我不知道你面临的问题是什么,因为你的css似乎正在工作.我只添加了HTML和标题css语句：
@H_502_8@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; } @H_502_8@<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>