如何保持内容div的标题固定？答案

【问题标题】：how to keep header of content div fixed?如何保持内容div的标题固定？
【发布时间】：2016-10-13 05:24:22
【问题描述】：

我有一个用 angularjs 构建的网页。

<html>
<head></head>
<body ng-app="app1" ng-controller = "ctrl1">

<header></header>

<div ng-view></div>

<footer></footer>

</body>
</html>

这里的页眉和页脚始终是固定的，但在内容部分中，当我进行路由时，并且在其中一个视图中，我有我一直想要修复的页眉。

问题是当使用position:fixed 作为该内容标题时，在移动主页滚动时，标题下方的内容似乎向上移动。

所以我的问题是如何创建该标题，以便在向下滚动内容部分或主要部分时，标题应始终固定。

感谢任何帮助!!!

谢谢

【问题讨论】：

【解决方案1】：

您需要做的是向您的内容添加一个等于标题高度的padding-top。这样您的内容将永远不会在标题下方向上滚动

.content-header {
height: 30px;
position: absolute;
top: 0px;
}
.content-container {
padding-top: 30px;
overflow: scroll;
position: relative;
}

【讨论】：

【解决方案2】：

为该 div 使用 overflow: scroll;。

<div class="content" ng-view></data>

.content {
    width: 150px;
    height: 150px;
    overflow: scroll;
}

【讨论】：

【解决方案3】：

您可以使用引导程序来简化您的任务。请参考： https://getbootstrap.com/examples/navbar-fixed-top/

希望对你有所帮助。

【讨论】：