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

发布时间：2020-12-14 18:57:05 所属栏目：资源来源：网络整理

导读：令我感到惊讶的是,我没有通过Google搜索找到这个问题的简单答案,但滚动内容面板的大多数回复都无法正常工作,或者无法使用引导. 答案like this one有全页滚动条,这似乎错了. 我只是试图拥有100％的高度html和body,没有浏览器滚动条,但滚动显示在身体内容区域

令我感到惊讶的是,我没有通过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 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!